CSS Text Decoration

Written by Swapnil RajaUpdated 30 Jul 2026

The CSS Text Decoration property is used to add or remove decorative lines from text.

It is commonly used to:

Underline text
Add overlines
Strike through text
Remove underlines from links

Text decoration helps emphasize content and improve the visual appearance of web pages. The supporting concepts are explained in CSS Pseudo Classes and Accessible CSS.

Syntax

CSS Text Decoration Syntax

css

selector {
    text-decoration: value;
}

PreviousCSS Text Alignment NextCSS Font Family

h1 {
    text-decoration: underline;
}

Value	Description	Example
none	Removes decoration	text-decoration: none;
underline	Adds a line below the text	text-decoration: underline;
overline	Adds a line above the text	text-decoration: overline;
line-through	Adds a line through the text	text-decoration: line-through;
underline overline	Applies multiple decorations	text-decoration: underline overline;

CSS Text Decoration Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Text Decoration Example</title>
    <style>
        .underline {
            text-decoration: underline;
        }
        .overline {
            text-decoration: overline;
        }
        .line-through {
            text-decoration: line-through;
        }
        .no-decoration {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1 class="underline">Underlined Heading</h1>
    <p class="overline">This paragraph has an overline.</p>
    <p class="line-through">This text has a line through it.</p>
    <a href="#" class="no-decoration">Link Without Underline</a>
</body>
</html>

CSS Text Decoration

Syntax

Attributes

Decoration belongs to the text

Example

Browser Support

Notes

Conclusion