A text decoration is an underline, an overline, or a strike-through line.
The text-decoration-color property specifies the color of the line.
Color values can be hex, rgb, hsl, rgba, hsla, or a color name.
Text with a red underline.
Text with a red underline
<style>
.underline-color {
text-decoration: underline;
text-decoration-color: red;
}
</style>
<p class="underline-color">
Text with a red underline
</p>
text-decoration-color: color | initial | inherit;
| Value | Description |
|---|---|
color |
Text decoration color |
initial |
Sets the value to its default value value. |
inherit |
Inherits the value from its parent element. |
This table shows when text-decoration-color support started for each browser.
 Chrome
|
57.0 | Mar 2017 |
 Firefox
|
36.0 | Feb 2015 |
 IE/Edge
|
Not supported | |
 Opera
|
44.0 | Mar 2017 |
 Safari
|
7.1 | Sep 2014 |
