
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.
Read also:
HTML Text Formatting And Styles