CSS text-decoration-style Property

Description

The text-decoration-style CSS property determines the style of the line that is typically used to decorate text elements, such as underlines for hyperlinks or strike-throughs for deleted content. It allows web designers to control the appearance of these text decorations by specifying various styles, including options like "solid," "dotted," "dashed," and "wavy," among others. This property enhances the visual presentation of text and provides flexibility in achieving different design aesthetics while maintaining good readability and user experience on a webpage.

Initial value: solid
Applies to: All elements
Inherited: No
Computed value: As specified
Animatable: No
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