CSS text-decoration-color Property

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.

Example

#

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>

Syntax

text-decoration-color: color | initial | inherit;

Values

#

Value Description
color Text decoration color
initial Sets the value to its default value value.
inherit Inherits the value from its parent element.

Browser support

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

You may also like

Guides