stroke

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

• fill
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-width

More Information

• SVG 1.1 Spec
• MDN on fills and strokes

Browser Support