CSS text-decoration-color Property
CSS text-decoration-color property sets the color for text decoration line in HTML Element(s).
The syntax to specify a value for text-decoration-color property is
text-decoration-color: value;
The following table gives the possible values that could be given to text-decoration-color property.
Value | Description | Examples |
---|---|---|
A CSS Color | Any valid CSS Color Value. Refer CSS Color Values. | text-decoration-color: red;text-decoration-color: #3f5;text-decoration-color: rgb(0, 25, 255); |
initial | Sets text-decoration-color to default value. | text-decoration-color: initial; |
inherit | Inherits text-decoration-color value from its parent element. | text-decoration-color: inherit; |
For text-decoration-color to take effect, make sure that text-decoration-line is set with a value that displays a line.
Examples
In the following examples, we decorate the text using text-decoration-color property.
Decoration Line with red color
In the following example, we set the red color for text decoration line, using text-decoration-color property.
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { font-size: 50px; text-decoration-line: underline; text-decoration-color: red; } </style> </head> <body> <p id="p1">Hello World.</p> </body> </html>
Decoration Line with RGB color
In the following example, we set RGB color for text decoration line with rgb(), using text-decoration-color property.
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { font-size: 50px; text-decoration-line: underline; text-decoration-style: double; text-decoration-color: rgb(255, 114, 192); } </style> </head> <body> <p id="p1">Hello World.</p> </body> </html>
Conclusion
In this CSS Tutorial, we learned about text-decoration-color property, and how to use this property for HTML Elements, with examples.