CSS text-decoration-color property

text-decoration-color

The text-decoration-color property is used to specify the color for the text-decoration.

Syntax

text-decoration-color:color|inherit|initial

This is an example of text-decoration-color property

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS text decoration color</title>
    <style>
        .ms-green{
            text-decoration-line: overline;
            text-decoration-color: green;
        }
        .ms-purple{
            text-decoration-line: line-through;
            text-decoration-color: purple;
        }
        .ms-orange{
            text-decoration-line: underline;
            text-decoration-color: orange;
        }
    </style>
</head>
<body>
    <p class="ms-green">I have green colored overline</p>
    <p class="ms-purple">Look at my color too</p>
    <p class="ms-orange">And I have an orange colored underline</p>
</body>
</html>