stroke-width

Avatar of Geoff Graham
Geoff Graham on (Updated on )

The stroke-width property in CSS is for setting the width of a border on SVG shapes.

.module {
  stroke-width: 2;
}

Remember:

  • This will override a presentation attribute <path stroke-width="2" ... />
  • This will not override an inline style e.g. <path style="stroke-width: 2;" ... />

Values

The stroke-width property can accept any number, including whole numbers, decimals, and percentages:

  • stroke-width: 2px
  • stroke-width: 2em
  • stroke-width: 2
  • stroke-width: 2.5
  • stroke-width: 15%

Note that a unit identifier (i.e. px and em) are not required. A number without units is a value based on the coordinate system of the SVG viewBox. So, for example, 5 renders the same as 5% in a viewBox that is set to 0 0 100 100 (5/100 = .05 or 5%) but 10% in one that’s 0 0 50 50 (5/50 = .1 or 10%).

See the Pen stroke-width property by CSS-Tricks (@css-tricks) on CodePen.

Related

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Yes Yes Yes Yes 9+ 4.4+ Yes