CSS stroke-linecap Property
The stroke-linecap property specifies the shape of the end caps on a path's stroke in SVG.
When used as a presentation attribute, it can be overridden by CSS. When used in inline styles, it takes precedence over external CSS.
INFO
The stroke-linecap property can be used both as a CSS property and as an SVG presentation attribute. It can be applied to any element but only affects the following: <altGlyph>, <path>, <polyline>, <line>, <text>, <textPath>, <tref>, and <tspan>.
| Initial Value | butt |
|---|---|
| Applies to | Shapes and text content elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | SVG 1.1 Specification |
| DOM Syntax | Object.strokeLinecap = "round"; |
Syntax
CSS stroke-linecap syntax
css
stroke-linecap: butt | square | round | initial | inherit;Example of the stroke-linecap property:
CSS stroke-linecap code example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-linecap property example</h2>
<svg viewBox="0 0 6 4">
<!-- Effect of the "butt" value -->
<path d="M1,1 h4" stroke="#8ebf42"
stroke-linecap="butt" />
<!-- Effect of the "butt" value on a zero length path -->
<path d="M3,3 h0" stroke="#8ebf42"
stroke-linecap="butt" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
<circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
</svg>
</body>
</html>Result
Example of the stroke-linecap property with the "round" value:
CSS stroke-linecap round example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-linecap property example</h2>
<svg viewBox="0 0 6 4">
<!-- Effect of the "round" value -->
<path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="round" />
<!-- Effect of the "round" value on a zero length path -->
<path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="round" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
<circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
</svg>
</body>
</html>Example of the stroke-linecap property with the "square" value:
CSS stroke-linecap square example
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-linecap property example</h2>
<svg viewBox="0 0 6 4">
<!-- Effect of the "square" value -->
<path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="square" />
<!-- Effect of the "square" value on a zero length path -->
<path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="square" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
<circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
</svg>
</body>
</html>Values
| Value | Description |
|---|---|
| butt | Ends the stroke with a sharp angle. On a zero-length subpath, the path will not be rendered. This is the default value. |
| square | Extends the stroke beyond the length of the path. |
| round | Makes the start and end points round. |
| initial | Standard CSS keyword that resets the property to its default value. |
| inherit | Standard CSS keyword that inherits the property from its parent element. |
Practice
What does the 'stroke-linecap' property in CSS affect?