stroke-linecap
Defines the shape of the ends of an SVG path. You can make them blunt (butt), rounded (round), or extended (square).
Quick example
path.icon-line {
/* Gives the ends of the line a nice smooth, rounded look */
stroke-linecap: round;
}Quick facts
Initial value
buttInherited
Yes
Applies to
a subset of SVG elements (shapes)
Animation type
discrete
Values
buttroundsquare stroke-linecap Browser Support
Widely available Since 2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
1+
1.5+
4+
15+