SVG stroke-linecap: Butt, Round, and Square Explained

The SVG stroke-linecap attribute determines the shape used at the end of open subpaths and dashed lines. By choosing between butt, round, and square, you control whether the stroke terminates precisely at its coordinates or extends past them with rounded or squared caps. Understanding how these three values modify stroke geometry is essential for precise vector alignment, path styling, and SVG animation.

How stroke-linecap Works

When an SVG renderer draws a path, the path’s coordinates define its mathematical center line. The stroke-width determines the thickness, expanding outward equally on both sides of that line. The stroke-linecap attribute dictates how the renderer finishes the stroke at the start and end coordinates of that line.

The Three stroke-linecap Values

1. butt (Default)

The butt value cuts the stroke off with a straight, flat edge directly perpendicular to the path direction at the exact endpoint coordinates.

• Extension: It adds zero extra length past the path’s coordinates.
• Appearance: A flat, squared-off end that stops precisely where the line ends.
• Common Use Cases: Ideal for precise grid alignments, technical diagrams, and instances where the stroke must not bleed past its bounding box.

2. round

The round value finishes the path with a semicircular cap extending past the endpoint.

• Extension: The radius of the semicircle is equal to half of the stroke-width, meaning the stroke extends beyond the endpoint coordinate by stroke-width / 2.
• Appearance: Smooth, rounded tips that soften line endings.
• Common Use Cases: Perfect for UI icons, organic line art, and dashed strokes where pill-shaped dashes are desired.

3. square

The square value caps the line with a rectangular extension that extends past the endpoint.

• Extension: The cap extends beyond the path coordinate by a distance equal to half the stroke-width.
• Appearance: Visually similar to butt because it is flat, but the total rendered path is longer.
• Common Use Cases: Used when lines need to overlap neatly at corners without using path joins, or when dashed lines need uniform square segments with consistent spacing.

Key Differences in Dimensions and Layout

• Bounding Box: Paths with round and square caps have larger visual bounding boxes than paths with butt caps because the strokes extend beyond the declared coordinate boundaries by half the stroke width in every direction.
• Dash Patterns: When using stroke-dasharray, the stroke-linecap applies to every single dash segment. Setting round or square on a dashed line will lengthen each visible dash and reduce the visible gap between them.