CSS Text Decoration Color Property to Modify Underline Color

April 1st, 2019

Nilesh Chaurasia

CSS Text Decoration Color Property

Text Decoration Color property is used to set the color of the underline of HTML text.

First, you have to write the text-decoration-line property than you have to write text-decoration-color property to apply the color Property properly.

Example 1 – Use of the CSS Property to set Underline Color

<!DOCTYPE html>
<html>
  <head>
    <style>
		.a
		{
		 text-decoration-line: underline;
		 text-decoration-color: blue;	 
		}
    </style>
  </head>
  <body>
    <p>This is a default paragraph element.</p>
    <p class="a">Lorem ipsum aute iru renisi ut exea commodo con erit.</p> 
  </body>
</html>

In the above code, we apply the text-decoration-color and text-decoration-line properties to an HTML paragraph element to show line to the paragraph element with the changed color.

CSS Text Decoration Color Property Example with HTML p Tag — Fig.1 – Text Decoration Color Property Example with HTML p Tag

Caution: Here you can not set different colors to underline and overline. Only one color is set to the lines.

Example 2 – Another example of Underline Color set with this Property

<!DOCTYPE html>
<html>
  <head>
    <style>
		.a
		{
		 text-decoration-line: underline;
		 text-decoration-color: blue;	 
		}
    </style>
  </head>
  <body>
    <p>This is a default paragraph element.</p>
    <p class="a">Lorem ipsum aute iru renisi ut exea commodo con erit.</p> 
  </body>
</html>

In the above code, we apply the text-decoration-color and text-decoration-line properties to an HTML paragraph element to show line to the paragraph element with the changed color.

In the “class a” we apply different colors to underline and overline, but text-decoration-color will not apply because you can not set different color to underline and overline.