CSS - text-decoration-color Property

Quiz

CSS text-decoration-color sets the color of the text decoration line(underline, overline, or line-through) that is specified using the CSS text-decoration-line or CSS text-decoration shorthand property.

You need to use the CSS text-decoration or text-decoration-line property before using the CSS text-decoration-color property.

Syntax

The syntax for the CSS text-decoration-color property is as follows:

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

Example 1

In this example, we have set the text decoration color of three paragraphs.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-decoration-color Property</title>
    <style>
        .myClass {
            text-decoration: underline;
            text-decoration-color: #04af2f;
        }
        .myClass2 {
            text-decoration: overline;
            text-decoration-color: purple;
        }
        .myClass3 {
            text-decoration: line-through;
            text-decoration-color: red;
        }
    </style>
</head>
<body>
    <h2>CSS text-decoration-color Property</h2>
    <p class="myClass">This is a paragraph with a green underline.</p>
    <p class="myClass2">This is a paragraph with a purple overline.</p>
    <p class="myClass3">This is a paragraph with a red line-through.</p>
</body>
</html>

Example 2

In this example, we have used the CSS text-decoration-color property with the CSS text-decoration-style property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-decoration-color Property</title>
    <style>
        .myClass {
            text-decoration: underline;
            text-decoration-style:double;
            text-decoration-color: #04af2f;
        }
        .myClass2 {
            text-decoration: line-through;
            text-decoration-style: dashed;
            text-decoration-color: purple;
        }
    </style>
</head>
<body>
    <h2>CSS text-decoration-color Property</h2>
    <p class="myClass">This is a paragraph with a green double underline.</p>
    <p class="myClass2">This is a paragraph with a purple dashed line-through.</p>
</body>
</html>

Supported Browsers

Property
text-decoration-color	57	79	36	12.1	44

Print Page