CSS text-decoration Property

A text decoration is an underline, an overline, or a strike-through line.

The text-decoration property adds one of these lines to text.

The lines can be customized with different styles and colors.

Example

#

Text with a red underline.

This text has an underline text-decoration

<p style="text-decoration: underline red">
  This text has an underline text-decoration
</p>

Using text-decoration

The text-decoration property applies a line decoration to the text.

text-decoration is a shorthand property for:

Syntax

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

Values

#

Value Description
none No text decoration.
text-decoration-line Text decoration to use: underline, overline, or line-through.
text-decoration-color Text decoration color
text-decoration-style Text decoration style: solid, wavy, dotted, dashed, or double.
initial Sets the value to its default value value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different text-decoration values.

Text with an underline

<style>
  .paragraph-example {
    text-decoration: underline;
  }
</style>

<p class="paragraph-example">
  Text with an underline
</p>

Did you know?

Did you know?

Using text-decoration with links

By default, link elements display with an underline.
The underline can be removed with the text-decoration property.

Here is a link (anchor tag)without underline.

<p>
  Visit <a href="https://google.com"
           target="_blank"
           style="text-decoration: none">
    Google.com
  </a>
</p>

Browser support

This table shows when text-decoration support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
3.0 Aug 1996
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides