mozilla
Your Search Results

    text-decoration-color

    Summary

    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.

    • Initial value currentColor
    • Applies to all elements. It also applies to ::first-letter and ::first-line.
    • Inherited no
    • Media visual
    • Computed value If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
    • Animatable yes, as a color
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    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;
    

    Values

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

    Formal syntax

    <color>
    

    Examples

    .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>
    <html>
    <head>
    <style>
    .example {
      font-size: 24px;
      text-decoration: underline;
      color: red;
    }
    .example:hover {
      color: blue;
      text-decoration: line-through;
    }
    </style>
    </head>
    <body>
    <span class="example">
      <span style="color:black">black text with red underline and blue hover</span>
    </span>
    </body>
    </html>
    

    Specifications

    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

    Firefox-specific notes

    • Prefixed rule (-moz-text-decoration-color) is removed in Gecko 40 (Firefox 40 / Thunderbird 40 / SeaMonkey 2.37) (bug 1097922).

    See also

    Document Tags and Contributors

    Last updated by: arai,