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:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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
- Firefox 36.0
- Opera 44.0