stroke

Avatar of Geoff Graham
Geoff Graham on (Updated on )

The stroke property in CSS is for adding a border to SVG shapes.

.module {
  stroke: black;
}

Remember:

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

Values

The stroke property can accept any CSS color value.

  • Named colors — orange
  • Hex colors — #FF9E2C
  • RGB and RGBa colors — rgb(255, 158, 44) and rgba(255, 158, 44, .5)
  • HSL and HSLa colors — hsl(32, 100%, 59%) and hsla(32, 100%, 59%, .5)

Awesomely enough, stroke also accepts the patterns of SVG shapes that are defined inside of a defs element:

.module {
	stroke: url(#pattern);
}

See the Pen stroke 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