-webkit-text-stroke

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 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: `-webkit-text-stroke-width`: `0` `-webkit-text-stroke-color`: `rgb(0, 0, 0)`
Applies to	all elements
Inherited	yes
Media	visual
Computed value	as specified
Animatable	as each of the properties of the shorthand: `-webkit-text-stroke-color`: yes, as a color
Canonical order	the unique non-ambiguous order defined by the formal grammar

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

<length> <color>where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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;
}

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

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	48.0 (48.0)	No support	(Yes)	(Yes)

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	48.0 (48.0)	No support	?	?