CSS text-decoration-style Property

The CSS text-decoration-style property settles the style of the text decoration (like solid, dotted, dashed, wavy, or double).

Demo:

Syntax:

text-decoration-style: solid|double|dotted|dashed|wavy;

solid (default) – the line will display as a single line.

double – the line will display as a double line.

dotted – the line will display as a dotted line.

dashed – the line will display as a dashed line.

wavy – the line will display as a wavy line.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

.ex3 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

</style>
</head>
<body>

<div class="ex1">This is some text with a dotted underline.</div>
<br>

<div class="ex2">This is some text with a wavy underline.</div>
<br>

<div class="ex3">This is some text with a double underline.</div>

</body>
</html>

Output:

This is some text with a dotted underline.

This is some text with a wavy underline.

This is some text with a double underline.

Share this: