Published
Updated
In-depth front-end engineering courses
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 |