MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

The text-decoration-color CSS property sets the color of the lines specified by text-decoration-line. The color applies to all lines that are specified. When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

/* <color> values */
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;

/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;

CSS does not provide a direct mechanism for specifying a unique color for each line type. This effect can nevertheless be achieved by nesting elements, applying a different line type to each element (via the text-decoration-line property), and specifying the line color (via text-decoration-color) on a per‐element basis.

Initial valuecurrentcolor
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Mediavisual
Computed valuecomputed color
Animation typea color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

<color>
The color of the line decoration.

Formal syntax

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Examples

<p>This paragraph has <s>some erroneous text</s>
    inside it that I want to call attention to.</p>
p { 
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Specifications

Specification Status Comment
CSS Text Decoration Module Level 3
The definition of 'text-decoration-color' in that specification.
Candidate Recommendation Initial definition. The text-decoration property is now a shorthand to define multiple related properties.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57 6.0 (6.0) - 39.0 (39.0)-moz
36.0 (36.0) without prefix
No support 44 7.1 -webkit
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 57 57 6.0 (6.0) - 39.0 (39.0)-moz
36.0 (36.0) without prefix
No support 44 8 -webkit

See also

  • When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.

 

Document Tags and Contributors

 Last updated by: mfluehr,