The text-decoration-style property specifies the style of the text decoration. Styles can be solid, dashed, dotted, double and wavy.
The text-decoration-style property is one of the CSS3 properties.
Initial Value | solid |
Applies to | All elements. It also applies to ::first-letter and ::first-line. |
Inherited | No. |
Animatable | No. |
Version | CSS3 |
DOM Syntax | object.style.textDecorationStyle = "dotted"; |
Syntax
text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;
Example of the text-decoration-style property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
Result
Example of the text-decoration-style property with the "wavy" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
Example of the text-decoration-style property with the "dotted" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: overline;
text-decoration-style: dotted;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
Example of the text-decoration-style property with the "dashed" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: overline;
text-decoration-style: dashed;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
Example of the text-decoration-style property with the "double" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: overline underline;
text-decoration-style: double;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
Example of the text-decoration-style property with all the values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
text-decoration-line: overline underline;
text-decoration-style: solid;
}
div.t2 {
text-decoration-line: line-through;
text-decoration-style: wavy;
}
div.t3 {
text-decoration-line: overline underline;
text-decoration-style: double;
}
div.t4 {
text-decoration-line: overline;
text-decoration-style: dashed;
}
div.t5 {
text-decoration-line: line-through;
text-decoration-style: dotted;
}
</style>
</head>
<body>
<h2>Text-decoration-style property example</h2>
<div class="t1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="t2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="t3">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="t4">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="t5">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
Values
Value | Description | Play it |
---|---|---|
solid | Defines a single line. This is the default value of this property. | Play it » |
double | Defines double line. | Play it » |
dotted | Defines a dotted line. | Play it » |
dashed | Defines a dashed line. | Play it » |
wavy | Defines a wavy line. | Play it » |
initial | Sets the property to its default value. | Play it » |
inherit | Inherits the property from its parent element. |
Browser support
57.0+ | ✕ | 36.0+ | 12.1+ | 44.0+ |
Practice Your Knowledge
Which of the following is a valid property value for the 'text-decoration-style' in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.