stroke-linecap

The stroke-linecap property in CSS is for setting the starting and ending points of a border on SVG shapes.

.module {
  stroke-linecap: round;
}

Remember:

• This will override a presentation attribute <path stroke-linecap="square" ... />
• This will not override an inline style e.g. <path style="stroke-linecap: square;" ... />

Values

The stroke-linecap property can accept the following values:

• butt (default): ends the stroke with a sharp 90-degree angle
• square: similar to butt except that it extends the stroke beyond the length of the path
• round: adds a radius that smooths out the start and end points, which is controlled by the stroke-width

See the Pen stroke-linecap property by CSS-Tricks (@css-tricks) on CodePen.

Related

• stroke
• stroke-dasharray
• stroke-dashoffset
• stroke-width

More Information

• SVG 1.1 Spec
• MDN on fills and strokes

Browser Support