Definition and Usage

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

This property allows you to specify the color of the emphasis marks independently from the text color.

If no explicit color is specified, the text decoration color defaults to the element's computed 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
Percentages n/a
Computed value computed color
Animation type by computed value type

Practical Example

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 4
#text-decoration-color-property

References

See also