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.

Comments

  1. User Avatar
    Andrea Maillard
    Permalink to comment#

    This makes me finally want to use text-decoration :) At last underline will have an interesting look

  2. User Avatar
    Sebastian Lasse
    Permalink to comment#

    Unfortunately it seems that neither transition nor :visited is working with text-decoration so far.

  3. User Avatar
    Nate
    Permalink to comment#

    Why isn’t this supported? Seems like something that should be given that text-decoration is supported across browsers.

  4. User Avatar
    Serhii
    Permalink to comment#

    I’m testing this in chrome 54 and it doesnt work with prefix or without it

  5. User Avatar
    Alex
    Permalink to comment#

    Hi, I’m testing this in chrome 55 and it isn’t working with the prefix or with out it, in safari 10 it only works with the prefix, and in firexos 50.1 it works without the prefix.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag