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