CSS text-stroke-color Property

The text-stroke-color property specifies the color of the character’s stroke. The initial value of the text-stroke-color property is currentColor.

You can choose colors from here HTML colors.

INFO

The text-stroke-color property is a standard CSS property, but currently requires the -webkit- prefix for broad browser support. Firefox does not support it yet.

Initial Value	currentColor
Applies to	All elements.
Inherited	Yes.
Animatable	Yes. The color is animatable.
Version	CSS Text Module Level 4
DOM Syntax	object.style.textStrokeColor = "#8ebf42";

Syntax

CSS text-stroke-color values

css

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

Example of the text-stroke-color property:

CSS text-stroke-color code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
        margin-top: 2em;
      }
      p {
        margin: 0;
        font-size: 3em;
        -webkit-text-stroke-width: 2px;
        text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
        text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-color property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
    <input type="color" value="#8ebf42" />
    <script>
      const input = document.querySelector('input[type="color"]');
      const p = document.querySelector('p');
      input.addEventListener('input', (e) => {
        p.style.webkitTextStrokeColor = e.target.value;
        p.style.textStrokeColor = e.target.value;
      });
    </script>
  </body>
</html>

Result

SS text-stroke-color values list

Values

Value	Description
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 parent element.

Practice

The default value of the text-stroke-color is the default value of the

border-color property.color property.background-color property.

CSS text-stroke-color Property ​

Syntax ​

Example of the text-stroke-color property: ​

Result ​