stroke-linecap

Avatar of Geoff Graham
Geoff Graham on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Yes Yes Yes Yes 9+ 4.4+ Yes