CSS text-decoration-color Property

Definition and Usage

The text-decoration-color property sets the color of decoration lines drawn by text-decoration-line—underlines, overlines, and line-throughs. It does not change the text (glyph) color.

The initial value is currentColor, so the line matches the text until you override it. You can also set color inside the text-decoration shorthand.

CSS Syntax

Any valid CSS <color> works: names, hex, rgb(), hsl(), currentColor, or transparent.

Property Values

How to Use text-decoration-color

Draw a line first, then color it. The color alone never creates a decoration.

1. Set a line with text-decoration-line or the text-decoration shorthand.
2. Add text-decoration-color with any <color>.
3. Keep glyph color separate with the color property when you want a split look.
4. Check contrast so the line stays readable on the background.

Live Preview

Same underlined sentence. Change only text-decoration-color.

CSS Examples

Each snippet focuses on text-decoration-color. Use Try It Yourself for a live editor.

<style>
  p {
    text-decoration-line: underline;
    text-decoration-color: red;
  }
</style>

<p>Sample decoration color</p>

<style>
  p {
    color: #1d4ed8;
    text-decoration-line: underline;
    text-decoration-color: #dc2626;
  }
</style>

<p>Sample decoration color</p>

<style>
  p {
    color: #1d4ed8;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
  }
</style>

<p>Sample decoration color</p>

Key Takeaways