CSS text-decoration-style Property - Syntax, Values, Examples

The text-decoration-style property specifies the style of the text decoration. Styles can be solid, dashed, dotted, double and wavy.

The text-decoration-style property is one of the CSS3 properties.

Initial Value	solid
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.textDecorationStyle = "dotted";

Syntax

CSS text-decoration-style values

text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

Example of the text-decoration-style property:

text-decoration-style example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Try it Yourself »

Result

Example of the text-decoration-style property with the "wavy" value:

text-decoration-style wavy code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Try it Yourself »

Example of the text-decoration-style property with the "dotted" value:

text-decoration-style dotted code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline;
        text-decoration-style: dotted;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Try it Yourself »

Example of the text-decoration-style property with the "dashed" value:

text-decoration-style dashed code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline;
        text-decoration-style: dashed;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Example of the text-decoration-style property with the "double" value:

text-decoration-style double code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: overline underline;
        text-decoration-style: double;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Example of the text-decoration-style property with all the values:

text-decoration-style all values example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 20px 0;
      }
      div.t1 {
        text-decoration-line: overline underline;
        text-decoration-style: solid;
      }
      div.t2 {
        text-decoration-line: line-through;
        text-decoration-style: wavy;
      }
      div.t3 {
        text-decoration-line: overline underline;
        text-decoration-style: double;
      }
      div.t4 {
        text-decoration-line: overline;
        text-decoration-style: dashed;
      }
      div.t5 {
        text-decoration-line: line-through;
        text-decoration-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <div class="t1">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t2">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t3">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t4">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="t5">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
solid	Defines a single line. This is the default value of this property.	Play it »
double	Defines double line.	Play it »
dotted	Defines a dotted line.	Play it »
dashed	Defines a dashed line.	Play it »
wavy	Defines a wavy line.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

Syntax

Example of the text-decoration-style property:

Result

Example of the text-decoration-style property with the "wavy" value:

Example of the text-decoration-style property with the "dotted" value:

Example of the text-decoration-style property with the "dashed" value:

Example of the text-decoration-style property with the "double" value:

Example of the text-decoration-style property with all the values:

Values

Practice