Skip to main content
Home / CSS Almanac / Properties / T / text-decoration-color

text-decoration-color

The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links.

a {
  text-decoration-color: #E18728;
}

Values

text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and HSLa.

Shorthand

In browsers that support text-decoration-style and text-decoration-color you can add a color to a text-decoration shorthand property:

.underlined {
  text-decoration: underline dotted red;
}

Currently only Firefox supports this unprefixed. Safari supports it with the -webkit prefix. Chrome also needs the -webkit prefix and experimental web platform features enabled in Chrome flags.

Demo

The text-decoration-color in this demo works in the current versions of Firefox and Safari. It will also work in Chrome with the "experimental Web Platform features" flag enabled.

See the Pen text-decoration-color by CSS-Tricks (@css-tricks) on CodePen.

Related

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
31† 7.1* 6.0‡ None None None 8*

† with the "experimental Web Platform features" turned on in chrome://flags. Chrome 31 needed -webkit- prefix. We tested Chrome 50 and it only worked unprefixed.
‡ 6+ with -moz prefix, unprefixed as of 36.

icon-link icon-logo-star icon-search icon-star