Text stroke and fill (compatibility prefixes)
The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 49 | 3 | 18 | 2 | |
| Other | ||||||
| The -webkit-text-stroke CSS property specifies the width and color of strokes for text characters. This is a shorthand property for the longhand properties -webkit-text-stroke-width and -webkit-text-stroke-color. | 4 | 15 | 49 | 3 | 18 | 2 |
| The -webkit-text-stroke-color CSS property specifies the stroke color of characters of text. If this property is not set, the value of the color property is used. | 1 | 15 | 49 | 3 | 18 | 2 |
| The -webkit-text-stroke-width CSS property specifies the width of the stroke for text. | 1 | 15 | 49 | 3 | 18 | 2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.outlined-text {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #333;
-webkit-text-fill-color: transparent;
}Live demo
Use cases
-
Using Text stroke and fill (compatibility prefixes)
The -webkit-text-fill-color CSS property specifies the fill color of characters of text.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.