CSS text-decoration property

The CSS text-decoration property is used to specify the text-decoration style to be applied for the text of an HTML element.

CSS text-decoration property

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

Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.