CSS -webkit-text-stroke-color Property – Specifies the Stroke Color of Text

Definition and Usage

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

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

Basic Example

Formal syntax

Syntax

CSS

/* <color> values */
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #00a0e9;
-webkit-text-stroke-color: currentcolor;
-webkit-text-stroke-color: rgba(0, 0, 0, 0.4);

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

Values

Accepted values for the -webkit-text-stroke-color property
`<color>`	The color of the text stroke.

Formal definition

Formal definition of the -webkit-text-stroke-color Property
Initial value	`currentcolor` (the current text color)
Applies to	all elements
Inherited	yes
Animation	yes

Examples

HTML

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