The text-decoration-color property

The text-decoration-color property specifies a decorative line color. The property should be used in conjunction with the text-decoration-line and text-decoration-style properties. These properties extend the functionality of the text-decoration property, being more advanced analogues. The property value is any units for color.

Syntax

selector {
	text-decoration-color: color in any CSS format;
}

Default value: same color as a text.

Example

Now the text will have a red underline, since the text-decoration-color property is set to red:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-decoration-style: solid;
	text-decoration-color: red;
	text-decoration-line: underline;
}