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 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-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 accepts the following values:
cropextends the minimal amount past the corner necessary to form a convex corner. This is effectively the same as
stroke-miterlimitto behave as if it were set to a value of “1”.
arcsforms a point with the same curvature as the connecting paths.
miterjoins the lines at a sharp point.
bevelcrops the connecting point perpendicularly to the joint.
roundis similar to
bevel, except a circular “rounded” edge is added instead of a flat line.
See the Pen stroke-linejoin example
by CSS-Tricks (@css-tricks) on CodePen.