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 |
