stroke-linejoin

Avatar of Andy Adams
Andy Adams on

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

Resources