CSS text-decoration Property

The text-decoration property is used to set the decoration of the text.

In CSS3, it is a shorthand for the following properties:

If the value of one of these properties is absent, the default value will automatically be set. The text-decoration-line is required.

In CSS1 specification the text-decoration was not a shorthand and had the following values:

none
underline
overline
line-through
blink

Initial Value	none currentColor solid
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	No.
Animatable	No.
Version	CSS1, CSS3
DOM Syntax	object.style.textDecoration = "dashed";

Syntax

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

Example of the text-decoration property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        text-decoration: overline;
      }
      .b {
        text-decoration: line-through;
      }
      .c {
        text-decoration: underline;
      }
      .d {
        text-decoration: underline overline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration property example</h2>
    <p class="a">Lorem Ipsum is simply dummy text...</p>
    <p class="b">Lorem Ipsum is simply dummy text...</p>
    <p class="c">Lorem Ipsum is simply dummy text...</p>
    <p class="d">Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Result

Example of the text-decoration property with a specified color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        -webkit-text-decoration-color: #1c87c9;
        text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration property example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

In the given example the -webkit- extension is used for Safari.

Example of the text-decoration property with a specified style:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-decoration-line: underline;
      }
      div.t1 {
        text-decoration-style: dotted;
      }
      div.t2 {
        text-decoration-style: wavy;
      }
      div.t3 {
        text-decoration-style: solid;
      }
      div.t4 {
        text-decoration-line: overline underline;
        text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration property example</h2>
    <div class="t1">Lorem ipsum is simply dummy text...</div>
    <br>
    <div class="t2">Lorem ipsum is simply dummy text...</div>
    <br>
    <div class="t3">Lorem ipsum is simply dummy text...</div>
    <br>
    <div class="t4">Lorem ipsum is simply dummy text...</div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
text-decoration-line	Specifies the kind of the text decoration.
text-decoration-color	Specifies the color of the text decoration.
text-decoration-style	Specifies the style of the text decoration.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.