[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-stroke [Back]  [Original]

-webkit-text-stroke CSS property - CSS | MDN

-webkit-text-stroke CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since April 2017.

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.

In this article

Constituent properties

This property is a shorthand for the following CSS properties:

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

<length>

The width of the stroke.

<color>

The color of the stroke.

Formal definition

Initial valueas each of the properties of the shorthand:
Applies toall elements
Inheritedyes
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Formal syntax

-webkit-text-stroke = 
<line-width> ||
<color>

<line-width> =
<length [0,]> |
hairline |
thin |
medium |
thick
This syntax reflects the latest standard as per CSS Borders and Box Decorations Module Level 4, Compatibility. Not all browsers may have implemented every part. See Browser compatibility for support information.

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

Specifications

Specification
Compatibility
# the-webkit-text-stroke

Browser compatibility

See also


Web Proxy Viewer  |  New URL  |  Original Page