CSS text-decoration-color Property

What You’ll Learn

The text-decoration-color property controls the color of decoration lines on text, so underlines and strike-throughs can match or contrast with your design.

Introduction

The text-decoration-color property in CSS is used to set the color of text decorations such as underlines, overlines, and line-throughs. This allows you to customize the appearance of text decorations to match your design preferences, enhancing the visual appeal and readability of your web content.

Definition and Usage

Apply text-decoration-color on elements that already have a decoration line from text-decoration or text-decoration-line.

The decoration color can match the text with currentColor, or you can choose a different color for contrast, such as a red underline under dark text.

📝 Syntax

The syntax for the text-decoration-color property is straightforward. It can be applied to any text element, and you can specify a color using any valid CSS color value:

element {
  text-decoration-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

Basic Example

.underline {
  text-decoration: underline;
  text-decoration-color: red;
}

Syntax Rules

• A decoration line must be present for the color to appear.
• Any valid CSS color format works, including variables such as var(--brand).
• currentColor makes the line match the element’s text color.
• The property is not inherited, but shorthand on parent elements may affect children.

Related Properties

• text-decoration — shorthand for line, style, color, and thickness
• text-decoration-line — sets which lines appear
• text-decoration-style — sets solid, dotted, dashed, or wavy lines
• color — sets the text color itself

🎯 Default Value

The default value of the text-decoration-color property is currentColor, which means it inherits the color of the text itself.

💎 Property Values

When to Use text-decoration-color

text-decoration-color helps when the decoration line should look different from the text:

• Branded links — Keep link text one color and the underline another.
• Highlighted terms — Use a bright underline to draw attention without changing text color.
• Sale prices — Style the strike-through line separately from the price text.
• Design systems — Reuse CSS variables for consistent decoration colors across components.

Examples Gallery

Start with the reference red underline, then explore contrasting link colors, brand hex values, and styled sale prices.

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

<p class="underline">This text has a red underline.</p>

a {
  color: #1e40af;
  text-decoration: underline;
  text-decoration-color: #f59e0b;
}

.highlight {
  text-decoration: underline wavy;
  text-decoration-color: #7c3aed;
}

.old-price {
  color: #64748b;
  text-decoration: line-through;
  text-decoration-color: #94a3b8;
}

text-decoration-color in the family

text-decoration-color is one longhand piece of the text-decoration system. Pair it with text-decoration-line and text-decoration-style, or use the text-decoration shorthand when you want everything in one rule.

.note-link {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #dc2626;
}

💡 Best Practices