stroke-width

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 units (i.e. px and em) are not required. A number without units is rendered the same as a percentage. So, for example, 15 renders the same as 15%, in that the stroke will occupy 15% of the containing element.

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
This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag