The property text-decoration-color defines the text decoration line color set for the element with text-decoration-line.

Initial Value currentcolor
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation color value

The text-decoration-color property specifies the color of decorative lines added to characters. The color specified is applied to underlines, overlines, strikethroughs, squiggles, etc., that are systematically displayed for spelling errors, etc., but not for the foreground color.

If you want to add decorative lines to your text, you first need to use text-decoration-line to specify the type of line. By default, this is set to none, so even if you change the color, it will not be displayed.


/* Color values */

text-decoration-color: green;
text-decoration-color: #333;
text-decoration-color: #f55d5;
text-decoration-color: rgb(255, 0, 0);
text-decoration-color: rgba(255, 0, 0, 0.5);
text-decoration-color: currentcolor;
text-decoration-color: transparent;

/* Global values */

text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: unset;


valuewhat it does
colorSpecify the decorative line’s color (HEX, RGB, RGBA, HSL, HSLA). The default value is the element’s current color.
initialSets a property to its default value.
inheritSpecifies that the value is inherited from the parent element.