CSS text-decoration

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

Last updated on Sep 30, 2023