The CSS text-decoration-color Property

Overview

The text-decoration-color property defines the color for the decorative lines applied to text. It works hand in hand with the text-decoration-line property, which determines the type of line decoration such as underline, overline, or line-through.

Examples and Usage

Let's look at two examples where text-decoration-color customizes the color of an underline and how it can be combined with other text-decoration properties in a shorthand declaration nested within an element.

HTML Structure

<p class="underline-color">JSONLint is a validator and reformatter for JSON, a lightweight data-interchange format.</p>

<p class="shorthand-usage">
  <strong>Web Reference</strong> - Learn how to build for the Web, and have some fun.
</p>

CSS Styling

/* Applying colored underline decoration */
.underline-color {
  text-decoration-line: underline;
  text-decoration-color: royalblue;
}

/* Using text-decoration shorthand in a nested element */
.shorthand-usage > strong {
  text-decoration: wavy underline #cd3333 2px;
}

In the CSS, the paragraph with the .underline-color class has an underline with a royal blue color. The nested <strong> element within the .shorthand-usage class paragraph uses the text-decoration shorthand to apply a wavy underline with a color value of #cd3333 (a shade of red) and a thickness of 2px.

Additionally, text-decoration-color accepts all standard CSS color values, including named colors, hexadecimal colors, RGB, RGBA, HSL, and HSLA.

Values

The text-decoration-color property accepts the following values:

Value	Description
`<color>`	Determines the color of the text decoration. Any valid CSS color value can be used.

Associated Properties

text-decoration
text-decoration-line
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-style
text-emphasis-position
color
background-color
border-color

Tips and Tricks

Pay close attention to contrast and legibility when choosing a text decoration color. High enough contrast between the text and the text decoration can improve readability, especially for people with visual impairments. Numerous online tools can help you find the right balance.
To avoid redundancy in your CSS code, use the text-decoration shorthand to specify the line, style, color, and thickness of your text decoration in one statement.
You can achieve the effect of coloring different line types uniquely by using nested elements. Each element can be assigned a unique line type with text-decoration-line and a distinct color with text-decoration-color.

Browser Compatibility

Older versions of Safari (8-12), and Firefox (6-35), require vendor prefixes for proper functioning. For more details, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.