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 >
< 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:

Example: In this example, we are using text-decoration-style: double; property.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS text-decoration-style property
</ title >
< 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:

Example: In this example, we are using text-decoration-style: dotted; property.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS text-decoration-style property
</ title >
< 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:

Example: In this example, we are using text-decoration-style: dashed; property.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS text-decoration-style property
</ title >
< 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:

Example: In this example, we are using text-decoration-style: wavy; property.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS text-decoration-style property
</ title >
< 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:
Example: In this example, we are using text-decoration-style: initial; property.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS text-decoration-style property
</ title >
< 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:

Example: In this example, we are using text-decoration-style: inherit; property.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS text-decoration-style property
</ title >
< 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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!