CSS text-decoration-color

The CSS text-decoration-color property is used to color the text-decoration-line. That is, it does not color 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.

In the CSS styles, we have defined a selector p which selects all <p> elements in the HTML document. The selector applies the text-decoration-line: underline; property to underline the text content of the <p> element, and the text-decoration-color: coral; property to set the color of the underline to coral.

In the HTML body, we have a heading <h2> element and a <p> element. The CSS selector p applies the defined styles to the <p> element, which underlines its text content and sets the color of the underline to coral.

Therefore, the output of this code would be a paragraph with underlined text content and a coral color underline.

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

In the 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 the 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 »


Liked this post? Share it!