stroke-linejoin

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;
A miter joint
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 as miter except that crop forces the stroke-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 to bevel, 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
Related
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-width
Resources
W3C Working Draft of the CSS Fill and Stroke Module