CSS text-decoration-color property specifies the color of the text-decoration line. The color value can be specified in any valid CSS color formats like ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc. See the example below:
Example:
.p1{
text-decoration-line: underline;
text-decoration-color: red;
}
.p2{
text-decoration-line: underline;
text-decoration-color: #3215eb;
}
.p3{
text-decoration-line: underline;
text-decoration-color: rgb(21, 235, 28);
}
CSS Syntax
The text-decoration-color property has the following syntax:
text-decoration-color: color|transparent|initial|inherit;
Property Values
The text-decoration-color property accepts the following values:
| color | Sets the color of the decoration line. It can be any valid CSS color. The default value is currentColor. |
| transparent | Sets a transparent decoration line. |
| initial | Sets the text-decoration-color property to its default value(currentColor). |
| inherit | Inherits the text-decoration-color property from the parent element. |
General Info
| Default Value | currentColor |
| Inherited | No |
| JavaScript Usage | element.style.textDecorationColor = “blue” |
