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./* Width and color values */
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;
/* Global values */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;
text-stroke: inherit;
text-stroke: initial;
text-stroke: unset;
Constituent properties
This property is a shorthand for the following CSS properties:
-webkit-text-stroke-color-webkit-text-stroke-width
Syntax
Values
The width of the stroke.
The color of the stroke.
Formal definition
Formal syntax
-webkit-text-stroke =
||
=
|
thin |
medium |
thick
Examples
Adding a red text stroke
HTML
The stroke of this text is red.
CSS
#example {
font-size: 3em;
margin: 0;
-webkit-text-stroke: 2px red;
}
Result
Specifications
| Compatibility Standard # the-webkit-text-stroke |
Browser compatibility
BCD tables only load in the browser
See also
I'm trying the new text-stroke features and I've searched the web for a cross browser solution. For now I only could find it with webkit properties.
-webkit-text-stroke: 2px #FF1E00;
Could you let me know if there is a way so all browsers will display in the same way?
BoltClock
675k155 gold badges1362 silver badges1334 bronze badges
asked May 24, 2012 at 16:10
0
.strokeme
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
from: Outline effect to text
"What I have done instead is used the already supported text-shadow property [supported in Chrome, Firefox, Opera, and IE 9 I believe]."
answered Jun 20, 2013 at 4:36
0
As of May 24th,
2012, there is no cross-browser solution, as only webkit supports the experimental feature according to //caniuse.com/#search=text-stroke. You can simulate this [to some degree] with 4 or 5 text-shadow's on an element.
Demo: Text Stroke, on CSS-Tricks.com
answered May 24, 2012 at 16:13
SampsonSampson
261k74 gold badges530 silver badges559 bronze badges
0
You could try strokeText.js, a vanilla javascript plugin.
- Strokes do not overlap your text like they do with
-webkit-text-stroke - Supports all browsers except IE8 and below
- Selectable text
- Dependency-free
Full disclosure, I made the plugin.
answered Dec 11, 2017 at 20:14
inorganikinorganik
23.1k17 gold badges88 silver badges107 bronze badges
This can't be done natively cross-browser, but it can be implemented with a fallback for unsupported browsers:
color: blue;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 3px;
That way, webkit browsers will display white text with blue outline, but other browsers will still display the color of your choosing [this case blue].
answered Aug 28, 2019 at 21:36
DavidDavid
9281 gold badge12 silver badges19 bronze badges