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:
<!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><h1style="color: green">GeeksforGeeks</h1><b>text-decoration-style: solid</b><pclass="GFG1">This line has a solid underline.</p><pclass="GFG2">This line has a solid line-through.</p><pclass="GFG3">This line has a solid overline.</p></body></html>chevron_rightfilter_noneOutput:
- double: It draws double solid lines.
Style:
text-decoration-style: double;
Example:
<!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><h1style="color: green">GeeksforGeeks</h1><b>text-decoration-style: double</b><pclass="GFG1">This line has a double underline.</p><pclass="GFG2">This line has a double line-through.</p><pclass="GFG3">This line has a double overline.</p></body></html>chevron_rightfilter_noneOutput:
- dotted: It draws a dotted line.
Style:
text-decoration-style: dotted;
Example:
<!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><h1style="color: green">GeeksforGeeks</h1><b>text-decoration-style: dotted</b><pclass="GFG1">This line has a dotted underline.</p><pclass="GFG2">This line has a dotted line-through.</p><pclass="GFG3">This line has a dotted overline.</p></body></html>chevron_rightfilter_noneOutput:
- dashed: It draws a dashed line.
Style:
text-decoration-style: dashed;
Example:
<!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><h1style="color: green">GeeksforGeeks</h1><b>text-decoration-style: dashed</b><pclass="GFG1">This line has a dashed underline.</p><pclass="GFG2">This line has a dashed line-through.</p><pclass="GFG3">This line has a dashed overline.</p></body></html>chevron_rightfilter_noneOutput:
- wavy: It draws a wavy line.
Style:
text-decoration-style: wavy;
Example:
<!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><h1style="color: green">GeeksforGeeks</h1><b>text-decoration-style: wavy</b><pclass="GFG1">This line has a wavy underline.</p><pclass="GFG2">This line has a wavy line-through.</p><pclass="GFG3">This line has a wavy overline.</p></body></html>chevron_rightfilter_noneOutput:
- initial: It sets the text-decoration-style property to its default value.
Style:
text-decoration-style: initial;
Example:
<!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><h1style="color: green">GeeksforGeeks</h1><b>text-decoration-style: initial</b><pclass="GFG1">This line has a default underline.</p><pclass="GFG2">This line has a default line-through.</p><pclass="GFG3">This line has a default overline.</p></body></html>chevron_rightfilter_noneOutput:
- inherit: This property is inherited from its parent element.
Style:
text-decoration-style: inherit;
Example:
<!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><h1style="color: green">GeeksforGeeks</h1><b>text-decoration-style: inherit</b><divclass="main"><pclass="GFG1">This line has a inherited underline style.</p><pclass="GFG2">This line has a inherited line-through style.</p><pclass="GFG3">This line has a inherited overline style.</p></div></body></html>chevron_rightfilter_noneOutput:
Supported Browsers: The browser supported by text-decoration-style property are listed below:
- Google Chrome 57.0
- Firefox 36.0
- Opera 44.0
Recommended Posts:
- HTML | DOM Style textDecorationStyle Property
- CSS | transition-property Property
- How to override the CSS properties of a class using another CSS class ?
- Difference between bootstrap.css and bootstrap-theme.css
- CSS | table-layout Property
- CSS | text-align Property
- CSS | border-top-width Property
- CSS | isolation Property
- CSS | border-inline-start-style Property
- CSS | column-rule-width Property
- CSS | word-spacing Property
- CSS | animation-delay Property
- CSS | margin-top Property
- CSS | border radius property
- CSS | grid Property
- CSS | font-size-adjust Property
- CSS | visibility Property
- CSS | Display property
- CSS | grid-template-columns Property
- CSS | height Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
