W3docs
en
Log in

CSS text-decoration Property

Use the CSS text-decoration shorthand property to specify the kind of line, style and color of the text decoration. See property values and try examples.

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. Note that text-decoration-line is not required; if omitted, it defaults to none.

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

  • none
  • underline
  • overline
  • line-through
  • blink
Initial Valuenone currentColor solid
Applies toAll elements. It also applies to ::first-letter and ::first-line.
InheritedNo.
AnimatableNo.
VersionCSS1, CSS3
DOM Syntaxobject.style.textDecoration = "dashed";

Syntax

Syntax of CSS text-decoration Property

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

Note that multiple line values can be combined in the shorthand syntax, e.g., underline overline.

Example of the text-decoration property:

Example of CSS text-decoration Property with overline, line-through, underline and overline values

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

CSS text-decoration Property

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

Example of CSS text-decoration Property with text-decoration-color property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        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 »
Info

The -webkit- prefix is omitted here as modern browsers fully support the standard property.

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

Example of CSS text-decoration Property with text-decoration-line and text-decoration-style properties

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

ValueDescription
text-decoration-lineSpecifies the kind of the text decoration.
text-decoration-colorSpecifies the color of the text decoration.
text-decoration-styleSpecifies the style of the text decoration.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

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