CSS -webkit-text-stroke-width Property – Specifies the Stroke Width of Text

Definition and Usage

The -webkit-text-stroke-width property specifies the width (thickness) of the text stroke.
Explore its syntax, usage, and key considerations with practical examples.

In addition to this property, which specifies the width of the text stroke, there is the -webkit-text-stroke-color property that specifies the color of the stroke.
There is also the shorthand property -webkit-text-stroke that specifies both properties at once.

Basic Example

Formal syntax

Syntax

CSS

/* Keyword values */
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

/* Length values */
-webkit-text-stroke-width: 4px;
-webkit-text-stroke-width: 0.15em;
-webkit-text-stroke-width: 3mm;
-webkit-text-stroke-width: 6pt;

/* Percentage (%) units are not supported */
-webkit-text-stroke-width: 5%; /* ❌ Invalid */

/* Global values */
-webkit-text-stroke-width: inherit;
-webkit-text-stroke-width: initial;
-webkit-text-stroke-width: revert;
-webkit-text-stroke-width: revert-layer;
-webkit-text-stroke-width: unset;

Values

Accepted values for the -webkit-text-stroke-width property
`<line-width>`	Value for the width (thickness) of the stroke

Formal definition

Formal definition of the -webkit-text-stroke-width Property
Initial value	`0`
Applies to	all elements
Inherited	yes
Animation	no

Things to Keep in Mind

Animation only applies to the -webkit-text-stroke-color value. It does not apply to the -webkit-text-stroke-width value.
The percentage (%) unit cannot be used for the -webkit-text-stroke-width value.

Examples

HTML

<style>
    .text {
        font-size: 47px;
        font-weight: 900;
        color: white;
        -webkit-text-stroke-color: red;
        -webkit-text-stroke-width: 1px;
    }
</style>
<p class="text">TEXT STROKE</p>