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
.png)
