CSS text-decoration-color

The CSS text-decoration-color property is used to color the text-decoration-line. That is, it does not colors the text, it colors the decoration line. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{text-decoration-line: underline; text-decoration-color: coral;}
   </style>
</head>
<body>

   <h2>The text-decoration-color Property</h2>
   <p>This is an example of text-decoration-color property in CSS.</p>
   
</body>
</html>

Output

The text-decoration-color Property

This is an example of text-decoration-color property in CSS.

Note - Values that can be used to define text-decoration-line are underline, overline, and line-through

In above example, the following CSS code:

p{text-decoration-line: underline; text-decoration-color: coral;}

can also be replaced with:

p{text-decoration: underline coral;}

CSS text-decoration-color Syntax

The syntax of text-decoration-color property in CSS, is:

text-decoration-color: color|initial|inherit;

The initial keyword is used to apply the default value. Whereas the inherit keyword is used to apply the value inherited by the parent element.

We can also define any custom color like red, #ccc, rgb(133, 53, 24) etc. to the text-decoration-color property.

CSS Online Test

« Previous Tutorial Next Tutorial »