Text Decoration Color

What is text-decoration-color?

The text-decoration-color CSS property specifies the color of decorative lines added to text by text-decoration-line. These decorative lines include underlines, overlines, line-through (strikethrough), and even wavy lines used to indicate annotations.

Unlike setting the color on an element (which affects the text itself), text-decoration-color specifically targets the decorative lines drawn through or around the text. This separation allows for creative combinations where the text and its decoration have different colors.

The Evolution of Text Decoration Styling

Before CSS3, developers had limited control over text decoration styling. You could add an underline, but you couldn't independently control its color, thickness, or style separate from the text. The CSS Text Decoration Module Level 3 introduced these properties as separate, granular controls, giving developers fine-grained command over every aspect of text decorations.

For professional web development services, understanding these CSS properties is essential for creating polished, accessible user interfaces that meet modern design standards.

Syntax and Values

The text-decoration-color property accepts any valid CSS color value.

Accepted Color Formats

Named Colors:

text-decoration-color: red;
text-decoration-color: blue;

Hexadecimal:

text-decoration-color: #ff0000;
text-decoration-color: #f00;
text-decoration-color: #ff000080;

RGB and RGBA:

text-decoration-color: rgb(255, 0, 0);
text-decoration-color: rgb(255 0 0);
text-decoration-color: rgb(255 0 0 / 50%);

HSL and HSLA:

text-decoration-color: hsl(0, 100%, 50%);
text-decoration-color: hsl(0 100% 50% / 50%);

Special Keywords:

text-decoration-color: currentColor;
text-decoration-color: transparent;

Default Value

The initial value is currentColor, meaning the decoration matches the element's text color unless explicitly overridden. This behavior is defined in the CSS Text Decoration Module Level 3 specification.

For more advanced color techniques, explore our guide on Color Mix for creating modern color palettes in your web development projects.

The text-decoration Shorthand

The text-decoration shorthand combines four properties:

/* Individual properties */
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: 2px;

/* Combined shorthand - order is flexible */
text-decoration: underline red solid 2px;

Shorthand Usage

The shorthand accepts values in any order for line type, color, and style:

text-decoration: underline;
text-decoration: overline red;
text-decoration: none;
text-decoration: underline dotted blue;
text-decoration: green wavy underline;

This shorthand property is part of the comprehensive CSS text-decoration specification that provides developers with complete control over text decorations. To learn more about combining CSS properties effectively, see our guide on CSS Layout for building responsive, well-structured designs.

Browser Support

The text-decoration-color property has excellent support across all modern browsers:

Can I Use Statistics

As of 2025, approximately 97% of global web users have browsers that support text-decoration-color, making it safe for production use according to MDN Web Docs.

Vendor Prefixes

No vendor prefixes are required for modern browser support. However, if you need to support very old browsers (Internet Explorer or older Edge versions), you may need to implement fallbacks as noted in TutorialsPoint's CSS guide.

Practical Examples

Example 1: Custom Link Underlines

.primary-link {
 color: #0066cc;
 text-decoration-line: underline;
 text-decoration-color: #0066cc;
 text-decoration-thickness: 2px;
 text-underline-offset: 2px;
}

.cta-link {
 color: #e63946;
 text-decoration-line: underline;
 text-decoration-color: #e63946;
 text-decoration-style: wavy;
}

Example 2: Strikethrough for Deprecated Content

.deprecated {
 text-decoration-line: line-through;
 text-decoration-color: #dc3545;
 text-decoration-style: solid;
}

Example 3: Using currentColor

.adaptive-link {
 text-decoration-line: underline;
 text-decoration-color: currentColor;
 text-decoration-thickness: from-font;
}

The currentColor keyword makes the decoration automatically match the text color, perfect for adaptive designs and hover states. This technique is widely used in modern front-end development for creating flexible, theme-aware interfaces.

Example 4: Overline for Headings

.section-title {
 text-decoration-line: overline;
 text-decoration-color: #6f42c1;
 text-decoration-style: double;
 text-decoration-thickness: 3px;
}

Advanced Techniques

Animating Decoration Colors

The text-decoration-color property is animatable:

.animated-link {
 text-decoration-line: underline;
 text-decoration-color: #0066cc;
 transition: text-decoration-color 0.3s ease;
}

.animated-link:hover {
 text-decoration-color: #ff6600;
}

Using CSS Custom Properties

Create themeable decoration colors:

:root {
 --link-color: #0066cc;
 --link-decoration-color: var(--link-color);
 --decoration-thickness: 2px;
}
a {
 color: var(--link-color);
 text-decoration-line: underline;
 text-decoration-color: var(--link-decoration-color);
 text-decoration-thickness: var(--decoration-thickness);
}

@media (prefers-color-scheme: dark) {
 :root {
 --link-color: #66b3ff;
 --link-decoration-color: var(--link-color);
 }
}

This approach to CSS variables is essential for modern web applications that need to support both light and dark themes seamlessly. To dive deeper into CSS fundamentals, explore our comprehensive guide on CSS Selectors for more advanced targeting techniques.

Multiple Decoration Lines

<p>
 This text has
 <span class="underline">multiple</span>
 <span class="overline">decorations</span>
</p>

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

.overline {
 text-decoration-line: overline;
 text-decoration-color: purple;
}

Don't Convey Meaning with Color Alone

/* Potentially problematic */
.error-text {
 text-decoration-line: line-through;
 text-decoration-color: red;
}

/* Better approach */
.error-text {
 text-decoration-line: line-through;
 text-decoration-color: red;
 color: #333;
 font-style: italic;
}

Focus State Considerations

.interactive-link:focus {
 outline: 2px solid #0066cc;
 outline-offset: 2px;
 text-decoration-color: #0066cc;
}

Accessibility is a critical consideration in professional web development. Following WCAG 2.1 guidelines ensures your websites are usable by everyone. For comprehensive accessibility strategies in your projects, our SEO services team can help ensure your website meets accessibility standards while maximizing search visibility.

Common Mistakes and How to Avoid Them

Mistake 1: Forgetting text-decoration-line

The text-decoration-color property has no effect if text-decoration-line is not set:

/* WRONG - no visible decoration */
.no-effect {
 text-decoration-color: red;
}

/* CORRECT */
.proper-underline {
 text-decoration-line: underline;
 text-decoration-color: red;
}

Mistake 2: Assuming Decoration Inherits

Child elements cannot remove parent's decoration:

/* Parent */
.parent {
 text-decoration: underline blue;
}

/* Child cannot remove it */
.child {
 text-decoration: none; /* Does NOT remove parent's decoration */
}

Mistake 3: Ignoring Contrast

Low-contrast decoration lines can be hard to see:

/* Too light - poor contrast */
.poor-contrast {
 text-decoration-color: #ccc;
}

/* Better */
.good-contrast {
 text-decoration-color: #666;
}

Avoiding these common mistakes is part of following CSS best practices for maintainable code. Understanding how these properties work together is essential for building robust, accessible web applications.

Best Practices

1. Always set text-decoration-line first - Without a line type, text-decoration-color does nothing.

2. Use the shorthand when possible - The text-decoration shorthand is more concise and equally powerful.

3. Test contrast ratios - Ensure decoration colors meet accessibility guidelines using tools like WebAIM's Color Contrast Checker.

4. Use currentColor for adaptive designs - Decorations automatically adapt to theme changes.

5. Combine with text-underline-offset - Better readability on fonts with descenders.

6. Consider animation sparingly - Animated decorations can draw attention but use sparingly.

7. Test across browsers - Verify in your target browsers despite excellent support.

8. Provide focus indicators - Don't rely solely on decoration color for interactive elements.

Mastering these CSS properties contributes to building professional websites that are both visually appealing and accessible to all users.

Sources

1. MDN Web Docs: text-decoration-color - Official web standard documentation

2. MDN Web Docs: text-decoration - Shorthand property documentation

3. TutorialsPoint: CSS text-decoration-color - Educational reference with examples

4. CSS Text Decoration Module Level 3 - W3C - Official specification

5. WebAIM: Color Contrast Checker - Accessibility testing tool

6. WCAG 2.1 Guidelines - Web Content Accessibility Guidelines