W3cubDocs

/CSS

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 ⁨April 2017⁩.

The stroke-linejoin CSS property defines the shape to be used at the corners of an SVG element's stroked paths. If present, it overrides the element's stroke-linejoin attribute.

This property applies to any SVG corner-generating shape or text-content element (see stroke-linejoin for a full list), but as an inherited property, it may be applied to elements such as <g> and still have the intended effect on descendant elements'

Syntax

/* keyword values */
stroke-linejoin: bevel;
stroke-linejoin: miter;
stroke-linejoin: round;

/* Global values */
stroke-linejoin: inherit;
stroke-linejoin: initial;
stroke-linejoin: revert;
stroke-linejoin: revert-layer;
stroke-linejoin: unset;

Values

bevel: Indicates that a bevelled corner is to be used to join path segments. The bevel is formed by truncating the corner by a line perpendicular to a line that bisects the difference in the subpath angles where they meet the join point.
miter: 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. This is the default value.
round: Indicates that a round corner is to be used to join path segments. This is accomplished by cropping the join as per bevel, and then appending a filled arc tangent in order to round the corner.

The following values are defined, but not supported in any browser:

arcs: (Unsupported.) Indicates that an arcs corner is to be used to join path segments. The arc's 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.
crop: (Unsupported.) Indicates the corner should extend past the join point by the minimum amount necessary to form a convex corner. This is functionally equivalent to miter (see above) with a stroke-miterlimit value of 1.
fallback: (Unsupported; at risk.) behaves identically to crop bevel when the stroke-miterlimit value is exceeded.

Formal definition

Initial value	`miter`
Applies to	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>` elements in an `svg`
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

stroke-linejoin = 
  [ crop | arcs | miter ]       ||
  [ bevel | round | fallback ]

Examples

Line-joining styles

This example demonstrates the three currently supported keyword values for stroke-linejoin.

HTML

We set up four identical paths, all of which have a black stroke with a width of one and no fill.

<svg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path d="M2,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M2,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
  </g>
</svg>

CSS

To each of the four paths, a supported line-joining value is applied. The first is beveled, the second rounded, the third mitered, and the fourth also mitered but with a stroke-miterlimit of 2, which forces the corner to be beveled instead of mitered.

path:nth-child(1) {
  stroke-linejoin: bevel;
}
path:nth-child(2) {
  stroke-linejoin: round;
}
path:nth-child(3) {
  stroke-linejoin: miter;
}
path:nth-child(4) {
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
}

Results

Specifications

Specification
CSS Fill and Stroke Module Level 3> # stroke-linejoin>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`stroke-linejoin`	1	≤15	1.5	15	4	18	4	14	3.2	1.0	4.4	3.2
`bevel`	1	≤15	1.5	15	4	18	4	14	3.2	1.0	4.4	3.2
`miter`	1	≤15	1.5	15	4	18	4	14	3.2	1.0	4.4	3.2
`round`	1	≤15	1.5	15	4	18	4	14	3.2	1.0	4.4	3.2