X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS text-decoration-style Property

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

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

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

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>

An example with "wavy" value:

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>

An example with "dotted" value:

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>

An example with "dashed" value:

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>

An example with "double" value:

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>

Let’s see an example where all the values of the text-decoration-style are included:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      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>
    <br>
    <div class="t2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <br>
    <div class="t3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <br>
    <div class="t4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <br>
    <div class="t5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </body>
</html>

Values

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

Practice Your Knowledge

The text-decoration-style property specifies the style of the text decoration. Styles can be



Do you find this helpful?

Related articles