stroke-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The stroke-width
CSS property defines the width of a stroke applied to the SVG shape. If present, it overrides the element's stroke-width
attribute.
This property applies to any SVG shape or text-content element (see stroke-width
for a full list), but as an inherited property, it may be applied to elements such as <g>
and still have the intended effect on descendant elements' strokes. If the value evaluates to zero, the stroke is not drawn.
Syntax
/* Length and percentage values */
stroke-width: 0%;
stroke-width: 1.414px;
/* Global values */
stroke-width: inherit;
stroke-width: initial;
stroke-width: revert;
stroke-width: revert-layer;
stroke-width: unset;
Values
<length>
-
Pixel units are handled the same as SVG units (see
<number>
, above) and font-based lengths such asem
are calculated with respect to the element's SVG value for the text size; the effects of other length units may depend on the browser. <percentage>
-
Percentages refer to the normalized diagonal of the current SVG viewport, which is calculated as .
<number>
Non-standard-
A number of SVG units, the size of which defined by the current unit space.
Formal definition
Initial value | 1px |
---|---|
Applies to | <circle> , <ellipse> , <line> , <path> , <polygon> , <polyline> , and <rect> elements in an svg |
Inherited | yes |
Percentages | refer to the normalized diagonal measure of the current SVG viewport’s applied viewBox , or of the viewport itself if no `viewBox` is specified |
Computed value | an absolute <length> or <percentage> , numbers converted to absolute lengths first |
Animation type | by computed value type |
Formal syntax
Examples
Various stroke widths
This example demonstrates various value syntaxes for the stroke-width
property.
HTML
First, we set up five multi-segment paths, all of which use a black stroke with a width of one, and no fill. Each path creates a series of mountain symbols, going from left (a shallow corner angle) to right (an extreme corner angle).
<svg viewBox="0 0 39 30" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="none">
<path
d="M1,5 l7 ,-3 l7 ,3
m2,0 l3.5 ,-3 l3.5 ,3
m2,0 l2 ,-3 l2 ,3
m2,0 l0.75,-3 l0.75,3
m2,0 l0.5 ,-3 l0.5 ,3" />
<path
d="M1,8 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,14 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,18 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</g>
</svg>
CSS
To the first four paths, we apply stroke width values as pairs to show how bare number values and pixel values are functionally equivalent. For the first two paths, the values are .25
and .25px
. For the second two paths, the values are 1
and 1px
.
For the fifth and last path, a value of 5%
is applied, thus setting a stroke width that is five percent as wide as the SVG viewport's diagonal measure is long.
path:nth-child(1) {
stroke-width: 0.25;
}
path:nth-child(2) {
stroke-width: 0.25px;
}
path:nth-child(3) {
stroke-width: 1;
}
path:nth-child(4) {
stroke-width: 1px;
}
path:nth-child(5) {
stroke-width: 5%;
}
Results
Specifications
Specification |
---|
CSS Fill and Stroke Module Level 3 # stroke-width |
Browser compatibility
BCD tables only load in the browser