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

Interactive Demo

text-decoration-style: solid;

text-decoration-style: dashed;

text-decoration-style: dotted;

text-decoration-style: double;

text-decoration-style: wavy;

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

<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> 

 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; 
}

Browser Support

The following table will show you the current browser support for the CSS text-decoration-style property.

Desktop
79	57	36	44	12.1

Tablets / Mobile
57	36	43	12.2	7	57

Last updated by CSSPortal on: 2nd January 2024