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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { font-size: 50px; text-decoration-line: underline; text-decoration-style: solid; } </style> </head> <body> <p id="p1">Hello World.</p> </body> </html>
Double Line
In the following example, we decorate the text with a double line style, using text-decoration-style property.
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { font-size: 50px; text-decoration-line: underline; text-decoration-style: double; } </style> </head> <body> <p id="p1">Hello World.</p> </body> </html>
Dotted Line
In the following example, we decorate the text with a dotted line style, using text-decoration-style property.
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { font-size: 50px; text-decoration-line: underline; text-decoration-style: dotted; } </style> </head> <body> <p id="p1">Hello World.</p> </body> </html>
Dashed Line
In the following example, we decorate the text with a dashed line style, using text-decoration-style property.
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { font-size: 50px; text-decoration-line: underline; text-decoration-style: dashed; } </style> </head> <body> <p id="p1">Hello World.</p> </body> </html>
Wavy Line
In the following example, we decorate the text with a wavy line style, using text-decoration-style property.
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #p1 { font-size: 50px; text-decoration-line: underline; text-decoration-style: wavy; } </style> </head> <body> <p id="p1">Hello World.</p> </body> </html>
Conclusion
In this CSS Tutorial, we learned about text-decoration-style property, and how to use this property for HTML Elements, with examples.