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.



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

Using text-decoration

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

text-decoration is a shorthand property for:


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



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

  .paragraph-example {
    text-decoration: underline;

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

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.

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

Browser support

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

1.0 Dec 2008
1.0 Nov 2004
3.0 Aug 1996
3.5 Nov 1998
1.0 Jun 2003

You may also like