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:
<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 xlink:href="#highlight" x="6" />
<use xlink:href="#highlight" x="12" />
<use xlink:href="#highlight" x="2" y="6" />
<use xlink:href="#highlight" x="8" y="6" />
</svg>
| Value | arcs | bevel |miter | miter-clip | round |
|---|---|
| Default value | miter |
| Animatable | discrete |
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.
<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>
The bevel value indicates that a bevelled corner is to be used to join path segments.
<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>
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.
<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>
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.
<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>
The round value indicates that a round corner is to be used to join path segments.
<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>
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # LineJoin |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
stroke-linejoin |
No | No | No | No | No | No | No | No | No | No | No | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin