Text stroke and fill (compatibility prefixes)
The -webkit-text-stroke-width and -webkit-text-stroke-color CSS properties set the thickness and color of text outlines. The -webkit-text-fill-color sets the color within text character outlines. Both default to the text color.
Overview
The -webkit-text-stroke-width and -webkit-text-stroke-color CSS properties set the thickness and color of text outlines. The -webkit-text-fill-color sets the color within text character outlines. Both default to the text color.
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 |
Syntax
.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-stroke-width and -webkit-text-stroke-color CSS properties set the thickness and color of text outlines. The -webkit-text-fill-color sets the color within text character outlines. Both default to the text color.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
- MDN Web Docs - Text stroke and fill (compatibility prefixes)
- Can I use - Text stroke and fill (compatibility prefixes)
Powered by web-features