CSS text-decoration-style Property
The text-decoration-style property in CSS is used to set the text-decoration of an element. The text-decoration property is the combination of text-decoration-line, text-decoration-style, and text-decoration-color properties.
Syntax:
text-decoration-style: solid|double|dotted|dashed|wavy|initial| inherit;
Property Values:
- solid: It draw a solid single line. It is the default value of the text-decoration-style property.
- double: It draws double solid lines.
- dotted: It draws a dotted line.
- dashed: It draws a dashed line.
- wavy: It draws a wavy line.
- initial: It sets the text-decoration-style property to its default value.
- inherit: This property is inherited from its parent element.
Example: In this example, we are using text-decoration-style: solid; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-decoration-style property </ title > <!-- CSS style --> < style > p { text-decoration-style: solid; } .GFG1 { text-decoration-line: underline; } .GFG2 { text-decoration-line: line-through; } .GFG3 { text-decoration-line: overline; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < b >text-decoration-style: solid</ b > < p class = "GFG1" > This line has a solid underline. </ p > < p class = "GFG2" > This line has a solid line-through. </ p > < p class = "GFG3" > This line has a solid overline. </ p > </ body > </ html > |
Output:
Example: In this example, we are using text-decoration-style: double; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-decoration-style property </ title > <!-- CSS style --> < style > p { text-decoration-style: double; } .GFG1 { text-decoration-line: underline; } .GFG2 { text-decoration-line: line-through; } .GFG3 { text-decoration-line: overline; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < b >text-decoration-style: double</ b > < p class = "GFG1" > This line has a double underline. </ p > < p class = "GFG2" > This line has a double line-through. </ p > < p class = "GFG3" > This line has a double overline. </ p > </ body > </ html > |
Output:
Example: In this example, we are using text-decoration-style: dotted; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-decoration-style property </ title > <!-- CSS style --> < style > p { text-decoration-style: dotted; } .GFG1 { text-decoration-line: underline; } .GFG2 { text-decoration-line: line-through; } .GFG3 { text-decoration-line: overline; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < b >text-decoration-style: dotted</ b > < p class = "GFG1" > This line has a dotted underline. </ p > < p class = "GFG2" > This line has a dotted line-through. </ p > < p class = "GFG3" > This line has a dotted overline. </ p > </ body > </ html > |
Output:
Example: In this example, we are using text-decoration-style: dashed; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-decoration-style property </ title > <!-- CSS style --> < style > p { text-decoration-style: dashed; } .GFG1 { text-decoration-line: underline; } .GFG2 { text-decoration-line: line-through; } .GFG3 { text-decoration-line: overline; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < b >text-decoration-style: dashed</ b > < p class = "GFG1" > This line has a dashed underline. </ p > < p class = "GFG2" > This line has a dashed line-through. </ p > < p class = "GFG3" > This line has a dashed overline. </ p > </ body > </ html > |
Output:
Example: In this example, we are using text-decoration-style: wavy; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-decoration-style property </ title > <!-- CSS style --> < style > p { text-decoration-style: wavy; } .GFG1 { text-decoration-line: underline; } .GFG2 { text-decoration-line: line-through; } .GFG3 { text-decoration-line: overline; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < b >text-decoration-style: wavy</ b > < p class = "GFG1" > This line has a wavy underline. </ p > < p class = "GFG2" > This line has a wavy line-through. </ p > < p class = "GFG3" > This line has a wavy overline. </ p > </ body > </ html > |
Output:
Example: In this example, we are using text-decoration-style: initial; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-decoration-style property </ title > <!-- CSS style --> < style > p { text-decoration-style: initial; } .GFG1 { text-decoration-line: underline; } .GFG2 { text-decoration-line: line-through; } .GFG3 { text-decoration-line: overline; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < b >text-decoration-style: initial</ b > < p class = "GFG1" > This line has a default underline. </ p > < p class = "GFG2" > This line has a default line-through. </ p > < p class = "GFG3" > This line has a default overline. </ p > </ body > </ html > |
Output:
Example: In this example, we are using text-decoration-style: inherit; property.
html
<!DOCTYPE html> < html > < head > < title > CSS text-decoration-style property </ title > <!-- CSS style --> < style > p { text-decoration-style: inherit; } .main { text-decoration-style: wavy; } .GFG1 { text-decoration-line: underline; } .GFG2 { text-decoration-line: line-through; } .GFG3 { text-decoration-line: overline; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < b >text-decoration-style: inherit</ b > < div class = "main" > < p class = "GFG1" > This line has a inherited underline style. </ p > < p class = "GFG2" > This line has a inherited line-through style. </ p > < p class = "GFG3" > This line has a inherited overline style. </ p > </ div > </ body > </ html > |
Output:
Supported Browsers: The browser supported by text-decoration-style property are listed below:
- Google Chrome 57.0
- Edge 79.0
- Firefox 36.0
- Opera 44.0
- Safari 12.1