CSS text-decoration-color Property
Use the text-decoration-color CSS property to specify the color of the text decoration. See property values and try examples.
The text-decoration-color property is used to set the color of the text decoration. You can choose colors from here HTML colors.
These colors apply to decorations such as overlines, underlines, and wavy lines.
The text-decoration-color property is one of the CSS3 properties.
| Initial Value | currentColor |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | Yes. The color is animatable. |
| Version | CSS Text Decoration Module Level 3 |
| DOM Syntax | object.style.textDecorationColor = "#ccc"; |
Syntax
CSS text-decoration-color syntax
text-decoration-color: color | initial | inherit;Info
Note: Using the text-decoration shorthand property resets text-decoration-color to currentColor.
Example of the text-decoration-color property:
CSS text-decoration-color code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the text</title>
<style>
p {
text-decoration: overline underline;
text-decoration-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Result
Example of the text-decoration-color property with the "underline" and "line-through" values:
CSS text-decoration-color all values example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
text-decoration-color: #666666;
text-decoration-style: wavy;
}
s {
text-decoration-line: line-through;
text-decoration-color: #c91010;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is <s>simply dummy</s> text...</p>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| color | Defines the text decoration color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla(), and currentColor can be used. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
Practice
What can be set using the 'text-decoration-color' property in CSS?