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!