ContextQMD
Back to Content

-webkit-text-stroke

files/en-us/web/css/reference/properties/-webkit-text-stroke/index.md

latest1.7 KB
Original Source

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 {{cssxref("-webkit-text-stroke-width")}} and {{cssxref("-webkit-text-stroke-color")}}.

Constituent properties

This property is a shorthand for the following CSS properties:

  • {{cssxref("-webkit-text-stroke-color")}}
  • {{cssxref("-webkit-text-stroke-width")}}

Syntax

css
/* Width and color values */
-webkit-text-stroke: 4px navy;

/* Global values */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;

Values

  • {{cssxref("<length>")}}
    • : The width of the stroke.
  • {{cssxref("<color>")}}
    • : The color of the stroke.

Formal definition

{{CSSInfo}}

Formal syntax

{{csssyntax}}

Examples

Adding a red text stroke

HTML

html
<p id="example">The stroke of this text is red.</p>

CSS

css
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}

Result

{{EmbedLiveSample("Adding_a_red_text_stroke", 600, 60)}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also