CSS text-stroke-width Property

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

The text-stroke property is only used with a -webkit- vendor prefix.
Initial Value 0
Applies to All elements.
Inherited Yes.
Animatable No
Version Compatibility Standard
DOM Syntax object.style.textStrokeWidth = "thin";

Syntax

text-stroke-width: length | initial | inheirt;

Example of the text-stroke-width property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        margin: 0;
        font-size: 4em;
        -webkit-text-stroke-color: #1c87c9;
      }
      .thin {
        -webkit-text-stroke-width: thin;
      }
      .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>

Result

CSS text-stroke-width values list

Values

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

Browser support

chrome edge firefox safari opera
1.0+ 15.0+ 49.0+ 15.0+

Practice Your Knowledge

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?