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>

Result

CSS text-decoration Property

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>
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>

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.

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Which CSS property modifies the presentation of inline text by adding effects like underlines or through lines?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?