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 | as specified |
Animatable | no |
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 | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 48.0 (48.0)[1] | No support | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 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
.