W3docs
en
Log in

CSS stroke-width Property

How to use the stroke-width CSS property to set the width of the stroke. Read about the property and see the values with examples.

The CSS stroke-width property specifies the width of the stroke on the element.

CSS stroke-width overrides the SVG presentation attribute. For example, a CSS rule will take precedence over stroke-width="3" in the markup. Inline styles also override presentation attributes.

Info

The stroke-width is a presentation attribute and can be applied to any element but can have an effect only on the following elements: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>.

Info

Units like px or em are required, except when the value is 0.

Initial Value1
Applies toShapes and text content elements.
InheritedYes.
AnimatableYes.
VersionSVG 1.1 Specification
DOM SyntaxObject.strokeWidth = "0.5";

Syntax

CSS stroke-width syntax

stroke-width: length | percentage | initial | inherit;

Example of the stroke-width property:

CSS stroke-width code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-width property example</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 1px;" />
    </svg>
  </body>
</html>
Try it Yourself »

Result

CSS stroke-width

Example of the stroke-width property with the "length" value:

CSS stroke-width another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-width property example</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 3px;" />
    </svg>
  </body>
</html>
Try it Yourself »

Example of the stroke-width property with the "%" value:

CSS stroke-width percentage value example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-width property example</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 2%;" />
    </svg>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
lengthSpecifies the width of the stroke.
percentageSpecifies the width of the stroke in %.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

What does the CSS property 'stroke-width' do?