text-decoration-color

Definition

The text-decoration-color CSS property is used to specify the color of the decorative lines added to text using the text-decoration property. It allows you to customize the color of various text decorations, such as underlines, overlines, line-throughs, and other text effects.

The text-decoration-color property accepts any valid CSS color value. This can be a named color (e.g., red, blue), a hexadecimal value (e.g., #ff0000, #00bfff), an RGB value (e.g., rgb(255, 0, 0)), or an RGBA value (e.g., rgba(0, 0, 255, 0.5)).

Here’s an example:

.link {
  text-decoration: underline;
  text-decoration-color: blue;
}

In this example, the .link class sets the text-decoration property to underline to add an underline to the text. The text-decoration-color property is then set to blue, which determines the color of the underline.

It’s important to note that the text-decoration-color property only affects the color of the text decoration and does not impact the color of the text itself. If you want to change the color of the text, you should use the color property instead.

The text-decoration-color property is especially useful when you want to apply customized text decorations with specific colors. It allows you to enhance the visual appearance of links, highlight text, or create unique text effects by combining different text-decoration properties with different colors.

Syntax

a {
  text-decoration-color: #0ea5e9;
}

Values

<color> keywords, hex, RGB(A), HSL(A).
currentColor to match text color.
inherit / initial / unset.

Practical Examples

a {
  text-decoration: underline;
  text-decoration-color: rgba(14, 165, 233, 0.6);
}

Tint underlines separately from text for better contrast control.

HTML

Adjust decoration color independently to maintain contrast: Learn more.

Code

<p class="text-sm text-slate-700">Adjust decoration color independently to maintain contrast: <a class="font-semibold text-slate-900" style="text-decoration: underline; text-decoration-color: rgba(14,165,233,.65);" href="#">Learn more</a>.</p>

Tips & Best Practices

Pair with text-decoration-thickness/text-underline-offset for polished link styles.
Use semi-transparent colors for subtle underlines on dark backgrounds.

Accessibility & UX Notes

Maintain contrast between underline and background so links remain identifiable.

Browser Support

Modern browsers support decoration color; IE lacks support.

color and text-decoration shorthands.
text-decoration-style for dotted/dashed lines.
text-decoration-thickness to reinforce visibility.