text-decoration-color

text-decoration-color colors decorative lines; it does not change the foreground text color or create a line by itself.

Keep text dark and make the underline blue

The underline’s blue comes from text-decoration-color. The letters stay dark because color is separate.

<p class="blue">Blue underline, dark text</p>
<p class="match">CurrentColor underline</p>

p {
  color: #172554;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  font-size: 1.5rem;
}
.blue {
  text-decoration-color: #2563eb;
}
.match {
  text-decoration-color: currentColor;
}

Give a real link a visible underline

A solid underline and focus outline remain recognizable on the white surface. A faint alpha color is not automatically a better choice.

<p>Try the <a href="#details">practice details</a>.</p>
<section id="details">
  <h2>Practice details</h2>
  <p>This destination is inside the example.</p>
</section>

a {
  color: #172554;
  text-decoration-line: underline;
  text-decoration-color: #1d4ed8;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}

Values and defaults

The initial value is currentColor and the property is not inherited. It accepts color values. The same color applies to the element’s decorative lines; different colors for its underline and overline need separate styling structures. A later text-decoration shorthand resets the color.

Common mistakes

No underline, overline, or line-through means there is no decoration to color. Changing a descendant’s foreground does not automatically recolor a decoration established by an ancestor. Color changes alone are not sufficient keyboard-focus feedback. Ensure the line is visible against the resulting background and retain other link cues.

Learn color, text-decoration, and text-decoration-line.

Sources and browser support

MDN: text-decoration-color describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.