CSS text-decoration-color Property
CSS text-decoration-color Property can be used to specify the color of decorations(overlines, underlines, and line-throughs) over the text.
Syntax
text-decoration-color: color|initial|inherit;
Property Values
Values |
Descriptions |
---|---|
color |
It sets the color of the text-decoration |
initial |
It is used to set the property to its default value. |
inherit |
It inherits the property from its parent element. |
Example:
html
<!DOCTYPE html> < html lang = "en" dir = "ltr" > < head > < meta charset = "utf-8" > < title >text-decoration</ title > < style > h1 { color: green; } body { text-align: center; } table { margin: auto; } th { padding: 10px 25px; } .underline { text-decoration: underline wavy; } .overline { text-decoration: overline solid; } .line-through { text-decoration: line-through double; } .red td { text-decoration-color: red; } .green td { text-decoration-color: green; } .blue td { text-decoration-color: blue; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 > text-decoration-color: color;</ h2 > < table > < tr > < th >underline</ th > < th >line-through</ th > < th >overline</ th > </ tr > < tr class = "red" > < td class = "underline" >Hello Beginner!</ td > < td class = "line-through" >Hello Beginner!</ td > < td class = "overline" >Hello Beginner!</ td > </ tr > < tr class = "green" > < td class = "underline" >Hello Beginner!</ td > < td class = "line-through" >Hello Beginner!</ td > < td class = "overline" >Hello Beginner!</ td > </ tr > < tr class = "blue" > < td class = "underline" >Hello Beginner!</ td > < td class = "line-through" >Hello Beginner!</ td > < td class = "overline" >Hello Beginner!</ td > </ tr > </ table > </ body > </ html > |
Output:
Example:
html
<!DOCTYPE html> < html lang = "en" dir = "ltr" > < head > < meta charset = "utf-8" > < title >text-decoration</ title > < style > h1 { color: green; } body { text-align: center; } #example { text-decoration: underline double; text-decoration-color: initial; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 > text-decoration-color: initial;</ h2 > < div id = "example" > This text-decoration-color of this text is set to initial. </ div > </ body > </ html > |
Output:
Supported Browser
The browser supported by CSS text-decoration-color Property are listed below:
- Google Chrome 57.0
- Edge 79.0
- Firefox 36.0
- Opera 44.0
- Safari 12.1