CSS text-decoration Property

The CSS text-decoration property defines the decoration added to the text and is a shorthand property for:

text-decoration-line
text-decoration-color
text-decoration-style

Syntax:

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

text-decoration-line (required) – settles the kind of text decoration to use (like underline, line-through, overline).

text-decoration-color – settles the colour of the text decoration.

text-decoration-style – settles the style of the text decoration (like solid, dotted, dashed, wavy, double).

Example:

<!DOCTYPE html>
<html>
<head>
<style>

h3 {
  text-decoration: underline red;
}

h4 {
  text-decoration: underline wavy green;
}

p {
  text-decoration: line-through;
}
</style>
</head>
<body>

<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is heading 3

This is heading 4

This is a paragraph.

This is heading 3

This is heading 4

Share this: