CSS text-decoration-style property defines the style of the text decoration line such as ‘solid’, ‘dashed’, ‘wavy’, etc.
Example:
.p1{
text-decoration-line: underline;
text-decoration-style: solid;
}
.p1{
text-decoration-line: underline;
text-decoration-style: double;
}
.p1{
text-decoration-line: underline;
text-decoration-style: wavy;
}
Note: It is necessary to set a text-decoration-line before applying the text-decoration-style property. Otherwise, the text-decoration-style property has no effect on the text.
CSS Syntax
The text-decoration-style property has the following syntax:
text-decoration-style: solid|dashed|dotted|double|wavy|initial|inherit;
Property Values
The text-decoration-style property accepts the following values:
| solid | Sets a solid text decoration line. This is the default value. |
| dashed | Sets a dashed text decoration line. |
| dotted | Sets a dotted text decoration line. |
| double | Defines a double line as text-decoration. |
| wavy | Sets a wavy text decoration line. |
| initial | Sets the text-decoration-style property to its default value(solid). |
| inherit | Inherits the text-decoration-style property from the parent element. |
General Info
| Default Value | solid |
| Inherited | No |
| JavaScript Usage | element.style.textDecorationStyle = “double” |
