CSS text-decoration-style Property
CSS text-decoration-style property sets the decoration style for text in HTML Element(s).
The syntax to specify a value for text-decoration-style property is
text-decoration-style: value;
The following table gives the possible values that could be given to text-decoration-style property.
Value | Description | Examples |
---|---|---|
solid | A solid line. Default value. | text-decoration-style: solid; |
double | A double line. | text-decoration-style: double; |
dotted | A dotted line. | text-decoration-style: dotted; |
dashed | A dashed line. | text-decoration-style: dashed; |
wavy | A wavy line. | text-decoration-style: wavy; |
initial | Sets text-decoration-style to default value. | text-decoration-style: initial; |
inherit | Inherits text-decoration-style value from its parent element. | text-decoration-style: inherit; |
For text-decoration-style to take effect, make sure that text-decoration-line is set with a value that displays a line.
Examples
In the following examples, we decorate the text using text-decoration-style property.
Solid Line
In the following example, we decorate the text with a solid line style, using text-decoration-style property.
Example
Double Line
In the following example, we decorate the text with a double line style, using text-decoration-style property.
Example
Dotted Line
In the following example, we decorate the text with a dotted line style, using text-decoration-style property.
Example
Dashed Line
In the following example, we decorate the text with a dashed line style, using text-decoration-style property.
Example
Wavy Line
In the following example, we decorate the text with a wavy line style, using text-decoration-style property.
Example
Conclusion
In this CSS Tutorial, we learned about text-decoration-style property, and how to use this property for HTML Elements, with examples.