SVG stroke-linejoin: Miter vs Round vs Bevel

The SVG stroke-linejoin property defines the shape used to join two intersecting line segments or path subpaths. This article breaks down the visual and functional differences among its three core values—miter, round, and bevel—explaining how each handles corners, alters path geometry, and impacts the overall aesthetic of scalable vector graphics.

What Is stroke-linejoin?

When a path or polygon changes direction, a corner is formed. The stroke-linejoin attribute determines how the outside edges of the two meeting lines connect. Without defining a join style, SVG renderers default to standard angular joins, but customizing this property gives you precise control over sharp, soft, or truncated corners.

1. Miter (stroke-linejoin="miter")

The miter value is the default setting in SVG.

• Visual Appearance: Creates a sharp, pointed corner where the two stroke segments meet.
• How It Works: The outer edges of the two connecting strokes are extended until they meet at a sharp point.
• Considerations: On very acute angles, a miter join can extend far beyond the actual vertex, creating an excessively long spike. To prevent this, SVG uses the stroke-miterlimit property. When the length of the point exceeds this limit, the corner automatically falls back to a bevel join.

2. Round (stroke-linejoin="round")

The round value softens the transition between intersecting strokes.

• Visual Appearance: Creates a smooth, circular, rounded corner.
• How It Works: A circular arc with a diameter equal to the stroke-width is drawn to fill the gap between the outside edges of the two stroke segments.
• Considerations: Round joins provide a consistent, soft aesthetic regardless of the angle of intersection. They are commonly paired with stroke-linecap="round" to create uniformly rounded vector icons and illustrations.

3. Bevel (stroke-linejoin="bevel")

The bevel value creates a flat, angled corner.

• Visual Appearance: Produces a squared-off, chamfered, or sliced corner edge.
• How It Works: Instead of extending the stroke edges to a point (as in miter) or curving them (as in round), a straight line connects the outer endpoints of the two adjoining strokes, resulting in a triangular fill with a flat outer edge.
• Considerations: Bevel joins prevent sharp spikes on tight angles without introducing curves, making them ideal for technical drawings, mechanical designs, or low-poly visual styles.

Quick Comparison