CSS text-decoration property
HTML CSS

CSS text-decoration property

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

CSS text-decoration property is used to specify the style to be applied for the text. This is the shorthand property for text-decoration-line, text-decoration-style, and text-decoration-color.

This is an example of underlined text

Syntax

text-decoration: 
text-decoration-line text-decoration-color text-decoration-style;

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS text decoration</title>
</head>
<body>
    <h2 style="text-decoration: overline;">Text Overline</h2>
    <h2 style="text-decoration: underline wavy;">Text Underline with wavy style</h2>
    <h2 style="text-decoration: line-through wavy red;">Wavy Line-through text in red color</h2>
</body>
</html>

Output

Text Overline
Text Underline with wavy style
Wavy Line-through text in red color

Text decoration is the shorthand property for the following properties.

ValueDescription
text-decoration-lineSpecifies the type for text decoration (Overline, underline etc)
text-decoration-styleSpecifies the style for the text decoration
text-decoration-colorSpecifies the color for the text decoration