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 as em 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 $\frac{\sqrt{{<width>}^{2} + {<height>}^{2}}}{\sqrt{2}}$ .
<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

stroke-width = 
  [ <length-percentage> | <number> ]#  

<length-percentage> = 
  <length>      |
  <percentage>

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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`stroke-width`	≤80	≤80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80