CSS text-decoration-style

The CSS text-decoration-style property is used to style the text-decoration-line (line used to decorate the text). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{text-decoration-line: underline;
        text-decoration-style: double;}
   </style>
</head>
<body>

   <h2>The text-decoration-style Property</h2>
   <p>This is an example of text-decoration-style property in CSS.</p>
   
</body>
</html>

Output

The text-decoration-style Property

This is an example of text-decoration-style property in CSS.

CSS text-decoration-style Syntax

The syntax of text-decoration-style property in CSS, is:

text-decoration-style: x;

The value of x should be any of the following:

double - used to define/create double line
solid - used to define a solid style
dashed - used to define a dashed style
dotted - used to define a dotted style
wavy - used to define a wavy style
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS text-decoration-style Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2{text-decoration-line: underline; padding: 12px 0;}
      .a{text-decoration-style: double;}
      .b{text-decoration-style: solid;}
      .c{text-decoration-style: dotted;}
      .d{text-decoration-style: dashed;}
      .e{text-decoration-style: wavy;}
   </style>
</head>
<body>

   <h2 class="a">text-decoration-style: double</h2>
   <h2 class="b">text-decoration-style: solid</h2>
   <h2 class="c">text-decoration-style: dotted</h2>
   <h2 class="d">text-decoration-style: dashed</h2>
   <h2 class="e">text-decoration-style: wavy</h2>
   
</body>
</html>