stroke-linejoin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2020⁩.

Thestroke-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 also has a CSS property counterpart:stroke-linejoin. When both are specified, the CSS property takes priority.

You can use this attribute with the following SVG elements:

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>    <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:Thearcs value isn't widely supported yet.

Thearcs 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>    <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

Thebevel 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>    <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

Themiter 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 thestroke-miterlimit is exceeded, the line join falls back tobevel.

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:Themiter-clip value isn't widely supported yet.

Themiter-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 thestroke-miterlimit is exceeded, the miter is clipped at a distance equal to half thestroke-miterlimit value multiplied by the stroke width from the intersection of the path segments. This provides a better rendering thanmiter 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

Theround 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>    <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>