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 property.
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 text-decoration-style property.
Style:
text-decoration-style: solid;
Example:
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"> GeeksforGeeks </ 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:
- double: It draws double solid lines.
Style:
text-decoration-style: double;
Example:
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"> GeeksforGeeks </ 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:
- dotted: It draws a dotted line.
Style:
text-decoration-style: dotted;
Example:
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"> GeeksforGeeks </ 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:
- dashed: It draws a dashed line.
Style:
text-decoration-style: dashed;
Example:
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"> GeeksforGeeks </ 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:
- wavy: It draws a wavy line.
Style:
text-decoration-style: wavy;
Example:
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"> GeeksforGeeks </ 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:
- initial: It sets the text-decoration-style property to its default value.
Style:
text-decoration-style: initial;
Example:
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"> GeeksforGeeks </ 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:
- inherit: This property is inherited from its parent element.
Style:
text-decoration-style: inherit;
Example:
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"> GeeksforGeeks </ 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