stroke-linejoin
===============

The **`stroke-linejoin`** attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked.

**Note:** As a presentation attribute `stroke-linejoin` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg">
  <!--
 Upper left path:
 Effect of the "miter" value
 -->
  <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="miter" />

  <!--
 Center path:
 Effect of the "round" value
 -->
  <path
 d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="round" />

  <!--
 Upper right path:
 Effect of the "bevel" value
 -->
  <path
 d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="bevel" />

  <!--
 Bottom left path:
 Effect of the "miter-clip" value
 with fallback to "miter" if not supported.
 -->
  <path
 d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="miter-clip" />

  <!--
 Bottom right path:
 Effect of the "arcs" value
 with fallback to "miter" if not supported.
 -->
  <path
 d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="black"
 fill="none"
 stroke-linejoin="arcs" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="highlight">
    <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5.5" r="0.05" fill="pink" />
  </g>
  <use href="#highlight" x="6" />
  <use href="#highlight" x="12" />
  <use href="#highlight" x="2" y="6" />
  <use href="#highlight" x="8" y="6" />
</svg>
```

Usage context
-------------

|  |  |
| --- | --- |
| Value | `arcs` | `bevel` |`miter` |
 `miter-clip` | `round` |
| Default value | `miter` |
| Animatable | discrete |

### arcs

**Note:** The `arcs` value as been introduced in SVG2 and it isn't widely supported yet, see Browser compatibility below for details.

The `arcs` value indicates that an arcs corner is to be used to join path segments. The arcs shape is formed by extending the outer edges of the stroke at the join point with arcs that have the same curvature as the outer edges at the join point.
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "arcs" value -->
  <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="arcs" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="p">
    <path
 d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### bevel

The `bevel` value indicates that a bevelled corner is to be used to join path segments.
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "bevel" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="bevel" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="p">
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### miter

The `miter` value indicates that a sharp corner is to be used to join path segments. The corner is formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect.

**Note:** If the `stroke-miterlimit` is exceeded, the line join falls back to `bevel`.
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "miter" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter" />

  <!-- Effect of the "miter" value on a sharp angle
 where de default miter limit is exceeded -->
  <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter" />

  <!-- the following red dotted line show where
 the miter value falls back to the bevel value -->
  <path
 d="M0,0 h10"
 stroke="red"
 stroke-dasharray="0.05"
 stroke-width="0.025" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <g>
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />

    <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="7" cy="5" r="0.05" fill="pink" />
    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
    <circle cx="8.5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### miter-clip

**Note:** the `miter-clip` value as been introduced in SVG2 and it isn't widely supported yet, see Browser compatibility below for details.

The `miter-clip` value indicates that a sharp corner is to be used to join path segments. The corner is formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect.

If the `stroke-miterlimit` is exceeded, the miter is clipped at a distance equal to half the `stroke-miterlimit` value multiplied by the stroke width from the intersection of the path segments. This provides a better rendering than `miter` on very sharp join or in case of an animation.
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "miter-clip" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter-clip" />

  <!-- Effect of the "miter-clip" value on a sharp angle
 where de default miter limit is exceeded -->
  <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="black"
 fill="none"
 stroke-linejoin="miter-clip" />

  <!-- the following red dotted line show where the clip should happen -->
  <path
 d="M0,0 h10"
 stroke="red"
 stroke-dasharray="0.05"
 stroke-width="0.025" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <g>
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />

    <path
 d="M7,5 l0.75,-3 l0.75,3"
 stroke="pink"
 fill="none"
 stroke-width="0.025" />
    <circle cx="7" cy="5" r="0.05" fill="pink" />
    <circle cx="7.75" cy="2" r="0.05" fill="pink" />
    <circle cx="8.5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

### round

The `round` value indicates that a round corner is to be used to join path segments.
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "round" value -->
  <path
 d="M1,5 l2,-3 l2,3"
 stroke="black"
 fill="none"
 stroke-linejoin="round" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <g id="p">
    <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" />
    <circle cx="1" cy="5" r="0.05" fill="pink" />
    <circle cx="3" cy="2" r="0.05" fill="pink" />
    <circle cx="5" cy="5" r="0.05" fill="pink" />
  </g>
</svg>
```

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineJoin |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.