The text-decoration-color property is used to set the color of the text decoration. You can choose colors from here HTML colors.
The colors can be applied to such decorations, as overlines, underlines, and wavy lines, in the scope of the value of this property.
The text-decoration-color property is one of the CSS3 properties.
Initial Value | currentColor |
Applies to | All elements. It also applies to ::first-letter and ::first-line. |
Inherited | No. |
Animatable | Yes. The color is animatable. |
Version | CSS1, CSS3 |
DOM Syntax | object.style.textDecorationColor = "#ccc"; |
Syntax
text-decoration-color: color | initial | inherit;
Example of the text-decoration-color property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the text</title>
<style>
p {
text-decoration: overline underline;
-webkit-text-decoration-color: #8ebf42;
text-decoration-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>
Result
![CSS text-decoration-color](/uploads/media/default/0001/04/d24e9b9cb1b26c578f2a079d7c8723743bfe4ee0.png)
In the given example the -webkit- extension for Safari is used.
Example of the text-decoration-color property with the "underline" and "line-through" values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
text-decoration-color: #666666;
text-decoration-style: wavy;
}
s {
text-decoration-line: line-through;
text-decoration-color: #c91010;
}
</style>
</head>
<body>
<h2>Text-decoration-color property example</h2>
<p>Lorem ipsum is <s>simply dummy</s> text...</p>
</body>
</html>
Values
Value | Description | Play it |
---|---|---|
color | Defines the text decoration color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. | Play it » |
initial | Sets the property to its default value. | Play it » |
inherit | Inherits the property from its parent element. |
Browser support
|
|
|
|
|
---|---|---|---|---|
57.0+ | ✕ | 36.0+ | 12.1+ | 44.0+ |
Practice Your Knowledge
What can be set using the 'text-decoration-color' property in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.