CSS text-decoration-color Property

CSS text-decoration-color property sets the color for text decoration line in HTML Element(s).

The syntax to specify a value for text-decoration-color property is

text-decoration-color: value;

The following table gives the possible values that could be given to text-decoration-color property.

Value Description Examples
A CSS Color Any valid CSS Color Value. Refer CSS Color Values. text-decoration-color: red;text-decoration-color: #3f5;text-decoration-color: rgb(0, 25, 255);
initial Sets text-decoration-color to default value. text-decoration-color: initial;
inherit Inherits text-decoration-color value from its parent element. text-decoration-color: inherit;

For text-decoration-color to take effect, make sure that text-decoration-line is set with a value that displays a line.

Examples

In the following examples, we decorate the text using text-decoration-color property.

Decoration Line with red color

In the following example, we set the red color for text decoration line, using text-decoration-color property.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: underline;
            text-decoration-color: red;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Decoration Line with RGB color

In the following example, we set RGB color for text decoration line with rgb(), using text-decoration-color property.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: underline;
            text-decoration-style: double;
            text-decoration-color: rgb(255, 114, 192);
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about text-decoration-color property, and how to use this property for HTML Elements, with examples.