Definition and Usage

The text-decoration-color property specifies the color of text decoration lines, as defined by the text-decoration-line property.

This allows you to apply a specific color to underlines, overlines, or strikethroughs independently of the text color.

Basic Example

CSS Live Demo: text-decoration-color Click the demo button below!

Formal syntax

CSS 
selector {
    text-decoration-color: <color>
}

Values

Accepted values for the text-decoration-color property
<color> The color of the line decoration.

Syntax

CSS 
/* <color> values */
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00a0e9;
text-decoration-color: rgb(255, 255, 128);
text-decoration-color: rgba(255, 255, 128, 0.5);
text-decoration-color: transparent;

/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;

Formal definition

Formal definition of the text-decoration-color property
Initial value currentcolor (computed text color)
Applies to all elements
Inherited no
Animatable yes

Practical Examples

HTML 
<p>The text decoration color is blue</p>
CSS 
p {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: blue;
}
Rendered Output

Browser compatibility

Browser compatibility for the text-decoration-color property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
text-decoration-color 57 79 36 12.1

Specifications

Specification for the text-decoration-color property
Specification
text-decoration-color CSS Text Decoration Module Level 3
#text-decoration-color-property

References

See also