text-decoration-color

Avatar of Marie Mosley
Marie Mosley on (Updated on )

Take the pain out of building site search with the Algolia hosted API. Start free now!

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.