CSS text-decoration-color Property

Description

The text-decoration-color CSS property controls the color of text decorations such as underlines, overlines, and line-throughs when they are applied to text elements using properties like text-decoration. By setting the text-decoration-color, you can specify a color other than the default for these text decorations, allowing you to customize the visual appearance of links or other text with decorations. This property is particularly useful for creating stylistic effects and ensuring that text decorations match the overall design of a web page or application.

Initial value: currentColor
Applies to: All elements
Inherited: No
Computed value: The computed color
Animatable: Yes
JavaScript syntax: object.style.textDecorationColor

Interactive Demo

text-decoration-color: green;

text-decoration-color: #AF5055;

text-decoration-color: rgb(103, 23, 39);

text-decoration-color: rgba(103, 23, 39, .8);

text-decoration-color: currentColor;

The rusty swing set creaked.

Syntax

text-decoration-color: <color>

Values

<color>The color data type value can be a named color keyword, or in hexadecimal, RGB, RGBa, HSL or HSLa notation.

Example

HTML

<p class="test"> text-decoration-color: rgb (255, 165, 0);  </p> 

<p class="test2"> text-decoration-color: red;  </p>

CSS

.test {
   text-decoration: underline; 
   font-size: 24px;
   -webkit-text-decoration-color: rgb(255, 165, 0);
   -moz-text-decoration-color: rgb(255, 165, 0);  
   text-decoration-color: rgb(255, 165, 0); 
}
.test2 {
   text-decoration: line-through;
   font-size: 24px;
   -webkit-text-decoration-color: red; 
   -moz-text-decoration-color: red; 
   text-decoration-color: red; 
}

Result

Editor