The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Use text-decoration-color to set the color of an underline, overline, strikethrough, or other text decoration. The property colors a decoration that already exists; pair it with text-decoration-line or use the text-decoration shorthand.
What text-decoration-color does
text-decoration-color accepts one CSS <color> value and controls the color of decorations generated by text-decoration-line. It does not draw a line on its own.
.link {
text-decoration-line: underline;
text-decoration-color: rebeccapurple;
}With no explicit color, the initial value is currentcolor, so the decoration normally follows the element’s current text color. The property is not inherited, even though decorations can be visually propagated from an ancestor to descendant text.
Syntax and values
text-decoration-color: <color>;| Value or fact | Meaning |
|---|---|
red, #663399, rgb(...), hsl(...), and other valid colors |
Sets the decoration’s color. |
currentcolor |
Uses the element’s computed text color; this is the initial value. |
| Multiple color values | Not valid for this property; it accepts one color. |
| Inheritance | Not inherited. |
| Applies to | All elements, plus ::first-letter and ::first-line. |
| Animation | Animates as a color. |
See the MDN property reference for the formal definition and compatibility details.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Three practical ways to color a line
Set the line and color separately
This explicit form is useful when you want to change only the color while keeping other decoration settings independent.
a {
text-decoration-line: underline;
text-decoration-color: tomato;
}Use the text-decoration shorthand
The shorthand can set line, style, color, and thickness in one declaration:
Rank #2
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
a {
text-decoration: underline wavy rebeccapurple;
}You can add a thickness value when needed:
a {
text-decoration: underline solid #0b63ce 0.12em;
}The shorthand’s grammar and related longhand properties are documented in MDN’s text-decoration reference.
Color an existing style without replacing it
If a rule already establishes the line, add only the color:
.warning {
text-decoration: underline;
text-decoration-color: #c62828;
}Use a sufficiently contrasting color for both the text and the background. A very light or similar-colored line may be difficult to see.
Why a child element may not remove an ancestor’s line
Text decorations propagate visually across descendant text. If a parent establishes an underline, setting text-decoration: none on a child does not cancel the line drawn by the parent. To give portions of text independent decoration treatment, establish the decoration on the elements that should own it.
Rank #4
<p class="sample">A <span class="marked">colored underline</span>.</p>.sample {
text-decoration-line: underline;
}
.marked {
text-decoration-line: underline;
text-decoration-color: tomato;
}Here the span has its own underline color, while the surrounding paragraph supplies the default decoration. This element structure is also the practical way to style different text portions separately.
Different colors for different decoration lines
CSS has no direct mechanism for assigning a unique color to each line type in one declaration. For example, you cannot assign one color to an underline and another to an overline on the same element through multiple text-decoration-color values. Nest elements and apply the relevant line and color to each element instead.
<p class="labels">
<span class="under">Underlined</span>
<span class="over">Overlined</span>
</p>.under {
text-decoration: underline solid #1565c0;
}
.over {
text-decoration: overline solid #d84315;
}Accessibility and interaction states
- Check contrast among the text, decoration, and background, especially when the line conveys meaning or improves readability.
- Do not use decoration color as the only signal for a state such as focus, error, or selection.
- For keyboard focus, retain or add another visible cue, such as an outline or a distinct style change. Changing only the text and underline colors is insufficient.
a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
text-decoration-color: #d84315;
}Browser support
MDN classifies text-decoration-color as Baseline Widely available and reports cross-browser availability since January 2020. If your project must support unusually old browser versions, verify the specific compatibility data on the MDN compatibility table.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
