Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Summary
The -webkit-text-stroke-width CSS property specifies the width of the stroke for text.
| Initial value | 0 |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Media | visual |
| Computed value | absolute <length> |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* Keyword values */ -webkit-text-stroke-width: thin; -webkit-text-stroke-width: medium; -webkit-text-stroke-width: thick; /* <length> values */ -webkit-text-stroke-width: 2px; -webkit-text-stroke-width: 0.1em; -webkit-text-stroke-width: 1mm; -webkit-text-stroke-width: 5pt; /* Global values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset;
Values
<line-width>- The width of the stroke.
Formal syntax
<length>
Example
CSS Content
p {
margin: 0;
font-size: 4em;
-webkit-text-stroke-color: red;
}
#thin {
-webkit-text-stroke-width: thin;
}
#medium {
-webkit-text-stroke-width: 3px;
}
#thick {
-webkit-text-stroke-width: 1.5mm;
}
HTML Content
<p id="thin">Thin stroke</p> <p id="medium">Medium stroke</p> <p id="thick">Thick stroke</p>
Specifications
| Specification | Status | Comment |
|---|---|---|
| Web Compatibility Standard The definition of '-webkit-text-stroke-width' in that specification. |
Living Standard | Initial standardization |
| Safari CSS Reference '-webkit-text-stroke-width' in that document. |
Non-standard unofficial documentation | Initial documentation |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 48.0 (48.0)[1] | No support | (Yes) | (Yes) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | 48.0 (48.0)[1] | No support | ? | ? |
[1] This feature is implemented behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.