CSS Text Decoration Styles
This page covers advanced text decoration styling including style, thickness, and the shorthand property.
Specify a Style for the Decoration Line
The CSS
text-decoration-style property
sets the style of the decoration line.
This property can have one of the following values:
solid- Default value. Single linedouble- Double linedotted- Dotted linedashed- Dashed linewavy- Wavy line
Example
Add different styles for the decoration line:
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line:
underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
Try it Yourself »
Specify the Thickness for the Decoration Line
The CSS
text-decoration-thickness property is used to
set the thickness of the decoration line.
Example
Add different thickness for the decoration line:
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line:
underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
Try it Yourself »
The Shorthand Property
The CSS
text-decoration property is a shorthand
property for:
text-decoration-line(required)text-decoration-color(optional)text-decoration-style(optional)text-decoration-thickness(optional)
Example
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline
red double;
}
p {
text-decoration: underline red double 5px;
}
Try it Yourself »
A Small Tip on Links
All links in HTML are underlined by default. Sometimes you
see that links are styled with no underline. The text-decoration: none; is used to remove
the underline from links,
like this:
