CSS text-stroke-width Property

The -webkit-text-stroke-width property specifies the width of the text stroke.

Info

The text-stroke-width property is not standardized as a standalone property. The standard shorthand is text-stroke (CSS Text Level 4). For broad browser support, use the -webkit- vendor prefix.

Initial Value	0
Applies to	All elements.
Inherited	No.
Animatable	No
Version	CSS Text Level 4 (vendor-prefixed)
DOM Syntax	object.style.webkitTextStrokeWidth = "1px";

Syntax

CSS text-stroke-width values

-webkit-text-stroke-width: length | initial | inherit;

Example of the text-stroke-width property:

CSS text-stroke-width code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p, h2 {
        margin: 0;
        font-size: 4em;
        -webkit-text-stroke-color: #1c87c9;
      }
      .thin {
        -webkit-text-stroke-width: 1px;
      }
      .medium {
        -webkit-text-stroke-width: 3.5px;
      }
      .thick {
        -webkit-text-stroke-width: 1.3mm;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-width property example</h2>
    <p class="thin">Lorem Ipsum </p>
    <p class="medium">Lorem Ipsum</p>
    <p class="thick">Lorem Ipsum</p>
  </body>
</html>

Try it Yourself »

Result

Note: Where supported, use the standard text-stroke shorthand instead of the prefixed property.

Values

Value	Description
length	Specifies the thickness of the stroke.
initial	Makes the property use its default value.
inherit	Inherits the property from its parent element.

Practice

Which statement is incorrect about CSS text-stroke-width property.

It can be applied to all elements.
It's an animatable property.
It specifies the width of the stroke.