Avatar of Marie Mosley
Marie Mosley on (Updated on )

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.

Browser support


† 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.

More information