Avatar of Marie Mosley
Marie Mosley on (Updated on )

Learn Development at Frontend Masters

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;


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


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.


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.


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.