The text-decoration-style property
The text-decoration-style property changes
the type of a decorative line: single line, double
line, dotted line, dashed line, wavy line.
The property should be used in conjunction with the
text-decoration-line
and text-decoration-color
properties. These properties extend the functionality of
the text-decoration
property, being more advanced analogues.
Syntax
selector {
text-decoration-line: solid | double | dotted | dashed | wavy;
}
Values
| Value | Description |
|---|---|
solid |
Solid line. |
double |
Double line. |
dotted |
Dotted line. |
dashed |
Dashed line. |
wavy |
Wavy line. |
Default value: solid.
Example . The wavy value
The text will now be underlined with a red wavy line:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-line: underline;
}
:
Example . The dotted value
The text will now be underlined with a red dotted line:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: dotted;
text-decoration-color: red;
text-decoration-line: underline;
}
:
Example . The double value
The text will now be crossed out with a red double line:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: double;
text-decoration-color: red;
text-decoration-line: line-through;
}
:
