Your Search Results



    The text-decoration-color CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by text-decoration-line. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements.


    Formal syntax: <color>
    text-decoration-color: currentColor
    text-decoration-color: red
    text-decoration-color: #00ff00
    text-decoration-color: rgba(255, 128, 128, 0.5)
    text-decoration-color: transparent
    text-decoration-color: inherit


    The color property accepts various keywords and numeric notations. See <color> values for more details.


    .example { 
        text-decoration: underline;
        text-decoration-color: red;

    The example above has the same effect as the following code, which also adds a hover style.

    <!DOCTYPE html>
    .example {
      font-size: 24px;
      text-decoration: underline;
      color: red;
    .example:hover {
      color: blue;
      text-decoration: line-through;
    <span class="example">
      <span style="color:black">black text with red underline and blue hover</span>


    Specification Status Comment
    CSS Text Decoration Level 3
    The definition of 'text-decoration-color' in that specification.
    Candidate Recommendation Initial definition. The text-decoration property wasn't a shorthand before.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support Not supported 6.0 (6.0)-moz
    36.0 (36.0)
    Not supported Not supported 7.1 -webkit
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support Not supported 6.0 (6.0)-moz
    36.0 (36.0)
    Not supported Not supported 8 -webkit

    See also

    Document Tags and Contributors

    Last updated by: Sebastianz,