CSS Text Decoration

In CSS (Cascading Style Sheets), the text-decoration property is used to control the decoration of text elements. Text decoration includes features like underlining, overlining, striking through, and changing the color of the decorated text.

The text-decoration property can take one or more values, and these values can be combined. Here are some common values:

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

Add a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.

Tip: You can combine more than one value, like overline and underline to display lines both over and under a text.

Example

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line:  line-through;
}

h3 {
  text-decoration-line:  underline;
}

p {
  text-decoration-line:  overline underline;
}

You can click on above box to edit the code and run again.

Output

Overline text decoration

Line-through text decoration

Underline text decoration

Overline and underline text decoration.

Note: It is not recommended to underline text that is not a link, as this often confuses the reader.

Specify a Color for the Decoration Line

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

Example

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color; blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

You can click on above box to edit the code and run again.

Output

Overline text decoration

Line-through text decoration

Underline text decoration

Overline and underline text decoration.

Specify the Thickness for the Decoration Line

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

Example

h1 {
  text-decoration-line:  underline;
  text-decoration-thickness:  auto;
}

h2 {
  text-decoration-line:  underline;
  text-decoration-thickness;  5px;
}

h3 {
  text-decoration-line:  underline;
  text-decoration-thickness:  25%;
}

p {
  text-decoration-line:  underline;
  text-decoration-thickness:  red;
  text-decoration-style:  double;
  text-decoration-thickness:  5px;
}

You can click on above box to edit the code and run again.

Output

Heading 1

Heading 2

Heading 3

A paragraph.

The Shorthand Property

The text-decoration property is a shorthand property for:

text-decoration-line (required)
text-decoration-color (optional)
text-decoration-style (optional)
text-decoration-thickness (optional)

Example

h1 {
  text-decoration:  underline;
}

h2 {
  text-decoration:  underline red;
}

h3 {
  text-decoration:   underline red double;
}

p {
  text-decoration:  underline red double 5px;
}

You can click on above box to edit the code and run again.

Output

Heading 1

Heading 2

Heading 3

A paragraph.

A Small Tip

All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none; is used to remove the underline from links, like this:

Example

a {
  text-decoration: none;
}

You can click on above box to edit the code and run again.

Output

A link with no underline: codelines.in