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

Browser Support

Desktop

X	79	57	36	44	12.1

Tablets / Mobile

57	57	36	43	12.2	7.0

Last updated by CSSPortal on: 2nd November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu