text-decoration-color

Avatar of Marie Mosley
Marie Mosley on (Updated on )

Take your JavaScript to the next level 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;
}

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.

Browser support

ChromeSafariFirefoxOperaIEAndroidiOS
31†7.1*6.0‡NoneNoneNone8*

† 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