CSS Text Decoration Style Property to Modify Underline Type Like Wavy

Ad Banner Image

CSS Text Decoration Style Property

This property is used to applying the different underline type the text. You can style your underline by solid, wavy, double and dashed type.

First, you have to write the text-decoration-line property than you have to write text-decoration-style property. Without text-decoration-line property you can not change the style of underline.

Example 1 – Wavy Style Underline for p HTML element.

<!DOCTYPE html>
<html>
  <head>
    <style>
		.a
		{
		 text-decoration-line: underline;
		 text-decoration-style: wavy;	 
		}
    </style>
  </head>
  <body>
    <p>This is a default paragraph element.</p>
    <p class="a">Lorem ipsum  aute iru re dolor in reddd preh ende rit.</p> 
  </body>
</html>

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

CSS Text Decoration Style Property with Wavy Underline
Fig.1 – Underline Style with Wavy Underline

You also decorate your text more beautiful by using the bellow properties of text decoration.

Example 2 – Underline Style with double and solid type

<!DOCTYPE html>
<html>
  <head>
    <style>
		.a
		{
		 text-decoration-line: underline;
		 text-decoration-style: double;	
		 text-decoration-color: red;
		}
		.b
		{
		 text-decoration-line: underline overline;
		 text-decoration-style: wavy;	
		 text-decoration-color: blue;
		}
		.b
		{
		 text-decoration-line: line-through;
		 text-decoration-style: solid;	
		 text-decoration-color: green;
		}
    </style>
  </head>
  <body>
    <p>This is a default paragraph element.</p>
    <p class="a">Lorem ipsum olup tate vel ites secil lum dol ore euhnf klenledo.</p> 
	<p class="b">Lorem ipsum prob ident, sunt in culpa qui offb icia desb erunt mollit .</p> 
  </body>
</html>

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

Underline Style with double and soild type
Fig.2 – Underline Style with double and soild type value assignment
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress