W3docs
en
Log in

CSS text-stroke Property

Use the text-stroke CSS property to specify the width and the color of the stroke. See property values and practice with examples.

The text-stroke property is an experimental property providing decoration options for a text. It is a shorthand for the following properties:

There is the text-fill-color property, which overrides the color property, allowing for a graceful fallback to a different text color in browsers that do not support the text-stroke property.

You can choose colors from here: HTML colors.

Web fonts are typically based on vector graphics which means that the shape is determined by mathematics and points instead of the pixel data. As they are vector we can do everything that can be done with vector text by other vector programs. For example, we can add a stroke for certain characters.

Warning

The text-stroke property is only used with a -webkit- vendor prefix. This property is not standard. It does not work for every user. There are incompatibilities between implementations, and the behavior may change in the future.

Initial Value0 currentColor
Applies toAll elements.
InheritedYes.
AnimatableYes.
VersionCompatibility Standard
DOM Syntaxobject.style.textStroke = "1px #666";

Syntax

CSS text-stroke values

text-stroke: length | color | initial | inherit;

Example of the text-stroke property:

CSS text-stroke code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 2.5em;
        margin: 0;
        -webkit-text-stroke: 2px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Try it Yourself »

Result

Example of the text-stroke property with multiple values:

CSS text-stroke multiple values example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        font-size: 2.5em;
        margin: 0;
        -webkit-text-stroke: 1px #8ebf42;
      }
      .b {
        font-size: 2.5em;
        margin: 0;
        -webkit-text-stroke: 2pt #8ebf42;
      }
      .c {
        font-size: 2.5em;
        margin: 0;
        -webkit-text-stroke: 0.1cm #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke property example</h2>
    <p class="a">Lorem Ipsum is simply dummy text...</p>
    <p class="b">Lorem Ipsum is simply dummy text...</p>
    <p class="c">Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
lengthSpecifies the thickness of the stroke.
colorSpecifies the color of the stroke. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

The text-stroke property is a shorthand for the following properties: