CSS text-decoration-color Property

The text-decoration-color property controls the color used to paint text decorations — for example underlines, overlines and line-throughs — independently of the element’s main text fill. It determines the stroke color applied to those decoration lines so you can make decorations stand out or match other parts of the design without changing the text’s own color. When a specific decoration color isn’t provided, user agents generally fall back to the element’s foreground color as defined by color.

This property interacts with the other text-decoration properties to produce the final decorative effect. Which kinds of decorations are drawn is set by text-decoration-line, and the visual pattern or stroke style of those decorations is controlled by text-decoration-style. The color you assign via text-decoration-color is applied to all decorations on that element; if a descendant element defines its own decoration properties, its own values govern that element’s decorations rather than inheriting from the ancestor.

In terms of rendering and scope, text-decoration-color affects only the painting of text decoration primitives — it does not change borders, outlines, box-shadow, or the underlying text fill. Because decorations are part of text painting, they follow wrapping, fragments and line breaks so the chosen color persists across continuations of the same decorated run. The property is typically resolved during the element’s computed styling (so it will interact predictably with cascade and specificity), and author-defined decoration colors will override defaults while remaining complementary to other typographic styling choices.