stroke-linejoin
is a CSS property that defines how SVG paths should appear at the point where two lines are joined together. stroke-linejoin
can be used to sharpen or soften the joints on connecting lines in an SVG.
stroke-linejoin
is also an SVG attribute which can be overwritten using CSS.
stroke-linejoin: miter;
![Two paths joining with a miter joint](png/miter-stroke-linejoin3f58.png)
stroke-linejoin
is just one of several properties affecting the rendering of two paths meeting. The final visual effect will depend on stroke-linejoin
as well as values for other SVG properties such as stroke-miterlimit
and stroke-align
.
Syntax
stroke-linejoin: [ crop | arcs | miter ] || [ bevel | round | fallback ]
At the moment, browsers seem to support only a single value for stroke-linejoin
. However, according to the W3C Working Draft of the CSS Fill and Stroke Module, there are ideas of combining two values (one from crop | arcs | miter
and one from bevel | round
) to create a combination of effects for stroke-linejoin
.
Values
stroke-linejoin
accepts the following values:
crop
extends the minimal amount past the corner necessary to form a convex corner. This is effectively the same asmiter
except thatcrop
forces thestroke-miterlimit
to behave as if it were set to a value of “1”.arcs
forms a point with the same curvature as the connecting paths.miter
joins the lines at a sharp point.bevel
crops the connecting point perpendicularly to the joint.round
is similar tobevel
, except a circular “rounded” edge is added instead of a flat line.
Example
See the Pen stroke-linejoin example
by CSS-Tricks (@css-tricks) on CodePen.
Browser Support
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Yes | Yes | Yes | Yes | 9+ | 4.4+ | Yes |