CSS Text Decoration
Text Decoration
In this chapter you will learn about the following properties:
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
Add a Decoration Line to Text
The text-decoration-line property is used to add
a decoration line to text.
Tip: You can combine more than one value, like overline and underline to display lines both over and under a text.
Example
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line:
overline underline;
}
Try it Yourself »
Note: It is not recommended to underline text that is not a link, as this often confuses the reader.
Specify a Color for the Decoration Line
The text-decoration-color property is used to
set the color of the decoration line.
Example
h1 {
text-decoration-line: overline;
text-decoration-color:
red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color:
blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color:
green;
}
p {
text-decoration-line:
overline underline;
text-decoration-color: purple;
}
Try it Yourself »
Specify a Style for the Decoration Line
The text-decoration-style property is used to
set the style of the decoration line.
Example
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 text-decoration-thickness property is used to
set the thickness of the decoration line.
Example
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 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
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:
All CSS text-decoration Properties
| Property | Description |
|---|---|
| text-decoration | Sets all the text-decoration properties in one declaration |
| text-decoration-color | Specifies the color of the text-decoration |
| text-decoration-line | Specifies the kind of text decoration to be used (underline, overline, etc.) |
| text-decoration-style | Specifies the style of the text decoration (solid, dotted, etc.) |
| text-decoration-thickness | Specifies the thickness of the text decoration line |
