CSS - -webkit-text-stroke
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
.
Example
HTML
<p id="example">The stroke of this text is red.</p>
CSS
#example { font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; }
Syntax
/* Width and color values */ -webkit-text-stroke: 4px navy; /* Global values */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: unset;
Values
<length>
- The width of the stroke.
<color>
- The color of the stroke.
Formal syntax
<a title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0" href="css/length"><length></a> <a title="" href="css/color_value"><color></a><p>where <br><code><color> = <a href="css/-webkit-text-stroke#rgb()"><rgb()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-text-stroke#rgba()"><rgba()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-text-stroke#hsl()"><hsl()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-text-stroke#hsla()"><hsla()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <hex-color> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-text-stroke#named-color"><named-color></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> currentcolor <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/-webkit-text-stroke#deprecated-system-color"><deprecated-system-color></a></code></p><p>where <br><code><rgb()> = rgb( <a href="css/-webkit-text-stroke#rgb-component"><rgb-component></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>3<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a> )<br><rgba()> = rgba( <a href="css/-webkit-text-stroke#rgb-component"><rgb-component></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>3<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a> , <a href="css/-webkit-text-stroke#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/-webkit-text-stroke#hue"><hue></a>, <a title="" href="css/percentage"><percentage></a>, <a title="" href="css/percentage"><percentage></a> )<br><hsla()> = hsla( <a href="css/-webkit-text-stroke#hue"><hue></a>, <a title="" href="css/percentage"><percentage></a>, <a title="" href="css/percentage"><percentage></a>, <a href="css/-webkit-text-stroke#alpha-value"><alpha-value></a> )<br><named-color> = <ident><br><deprecated-system-color> = ActiveBorder <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ActiveCaption <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> AppWorkspace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Background <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonFace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonHighlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> CaptionText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> GrayText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Highlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> HighlightText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveBorder <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveCaption <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveCaptionText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InfoBackground <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InfoText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Menu <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> MenuText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Scrollbar <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDDarkShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDFace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDHighlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDLightShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Window <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> WindowFrame <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> WindowText</code></p><p>where <br><code><rgb-component> = <a title="" href="css/integer"><integer></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/percentage"><percentage></a><br><alpha-value> = <a title="" href="css/number"><number></a><br><hue> = <a title="" href="css/number"><number></a></code></p>
Description
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
.
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animatable | as each of the properties of the shorthand:
|
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 4 | 48.0 (48.0)[1] | No support | 15 | 3.1 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4 | 48.0 (48.0)[1] | No support | 36 | 4.1 |
[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
.
See Also
Specifications
Specification | Status | Comment |
---|---|---|
Web Compatibility Standard The definition of '-webkit-text-stroke' in that specification. |
Living Standard | Initial standardization |
Safari CSS Reference '-webkit-text-stroke' in that document. |
Non-standard unofficial documentation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/-webkit-text-stroke