CSS stroke-miterlimit Property

The stroke-miterlimit property controls how sharp corners (miter joins) are rendered on stroked paths by limiting how long the pointed extension at a join can be relative to the stroke thickness. When two line segments meet at an angle, a miter join produces a pointed corner that extends beyond the outer edge of the stroke; the miter limit imposes a threshold so that if that pointed extension becomes too long compared to the stroke thickness, the renderer substitutes a different join style (typically a bevel) instead. This prevents extremely long, thin spikes at acute angles that can look visually jarring or produce rendering artifacts.

Because the effect depends on the relationship between the corner geometry and the stroke’s thickness, stroke-miterlimit is most meaningful when used together with the join style specified by stroke-linejoin. If the join style is set to one that does not produce miters, the miter limit will have no visible effect. Likewise, changes to stroke-width or any transforms that scale the shape will change the apparent length of miters and therefore can change whether a given corner passes the miter threshold — so consider these properties together when designing stroked shapes that must remain consistent across sizes.

In practical use, adjusting stroke-miterlimit helps control sharpness and visual weight in icons, logos, and vector artwork where acute joins appear. Setting a tighter limit avoids spikes that may clip or alias poorly at small sizes, while a looser limit preserves the crisp pointed aesthetic for certain geometric styles. It’s also useful when animating shapes or morphing paths: as angles vary, the join type can switch between miter and bevel based on the limit, so anticipate and test transitions. For complex dashed or segmented strokes, interactions with properties like stroke-dasharray can alter where joins occur and thus influence how the miter limit affects the final rendering.