CSS text-decoration-style Property

Description

The text-decoration-style property specifies the style of the text decoration line drawn on the specified element. The intended meaning for the values are the same as those of the border-style properties but includes one extra value which is 'wavy'.

Initial value: solid
Applies to: All elements
Inherited: No
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.textDecorationStyle

Syntax

text-decoration-style: solid | double | dotted | dashed | wavy

Values

solidA single line segment.
doubleTwo solid lines that are parallel with some space between them.
dottedA series of round dots.
dashedA series of square-ended dashes.
wavyIndicates a wavy line.

Example

HTML

<p class="test"> text-decoration-style: solid;  </p> 

<p class="test2"> text-decoration-style: double;  </p> 

<p class="test3"> text-decoration-style: dotted;  </p> 

<p class="test4"> text-decoration-style: dashed;  </p> 

<p class="test5"> text-decoration-style: wavy;  </p>

CSS

 p {
 text-decoration : underline ;  / * add text decoration for paragraphs (line below) * /
 font-size : 24px ;  / * set the font size for paragraphs * /
 }
.test {
   -webkit-text-decoration-style: solid; 
   -moz-text-decoration-style: solid; 
   text-decoration-style: solid; 
}
.test2 {
   -webkit-text-decoration-style: double;
   -moz-text-decoration-style: double;
   text-decoration-style: double; 
}
.test3 {
   -webkit-text-decoration-style: dotted; 
   -moz-text-decoration-style: dotted; 
   text-decoration-style: dotted; 
}
.test4 {
   -webkit-text-decoration-style: dashed;
   -moz-text-decoration-style: dashed; 
   text-decoration-style: dashed;
}
.test5 {
   -webkit-text-decoration-style: wavy; 
   -moz-text-decoration-style: wavy;
   text-decoration-style: wavy; 
}

Result