X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS text-stroke Property

The text-stroke property 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.

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 Value 0 currentColor
Applies to All elements.
Inherited Yes.
Animatable Yes.
Version -
DOM Syntax object.style.textStroke = "1px #666";

Syntax

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

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>

See another example with the text-stroke property where multiple values are used:

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>

Values

Value Description
length Specifies the thickness of the stroke.
color Specifies the color of the stroke. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

4.0+ -webkit- 15.0+ -webkit- 49.0+ -webkit- 11.0+
3.1 - 10.1 -webkit-
15.0+ -webkit-

Practice Your Knowledge

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



Do you find this helpful?

Related articles