Contents
Using text decorations in CSS
The CSS text-decoration
property specifies visual decorative lines for text:
h1 {
text-decoration: underline overline dotted red;
}
h2 {
text-decoration: underline overline wavy blue;
}
This property is actually a shorthand for four subproperties:
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
As with all shorthands, you need to list the values without naming the subproperties:
text-decoration: color line style thickness;
You don't need to define all the values for the shorthand to work – it will work with even a single value:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: underline overline;
}
In the following sections, we will explain each subproperty individually.
Modifying the CSS text decoration line
Using the CSS text-decoration-line
property allows you to specify what kind of line the text decoration is going to use:
p {
text-decoration-line: overline;
}
p.lines-everywhere {
text-decoration-line: overline underline line-through;
}
The syntax for this property is simple:
text-decoration-line: value;
You may combine different possible values in one statement as well.
Value | Description |
---|---|
none |
The default value. No text decoration line is displayed |
underline |
Makes CSS underline text |
overline |
Makes CSS overline text |
line-through |
Makes CSS draw a line across text |
blink |
A deprecated value. Made the text blink in CSS |
Coloring the decoration line
The CSS text-decoration-color
allows you to set the color for CSS underlines, overlines, and line-throughs:
The syntax for this property is almost the same as the ones discussed above:
text-decoration-color: color;
You can define the color using a name, RGB, RGBA, HEX, HSL or HSLA value.
Tip: to get the value for the exact color tone you need, use the Pickeristic color picker.

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion

- Professional service
- Flexible timetables
- A variety of features to choose from
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs

- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Styling CSS text decorations
The CSS text-decoration-style
allows you to define how to display the text decoration line:
The syntax for this property is as follows:
text-decoration-style: value;
All the available values are listed in the table below.
Value | Description |
---|---|
solid |
The default value. Displays as a single straight line |
double |
Display a double line |
dotted |
Display a dotted line |
dashed |
Display a dashed line |
wavy |
Display a wavy line |
Defining line thickness
The last CSS text decoration subproperty is called text-decoration-thickness
. It sets the width of the decoration line:
text-decoration-thickness: value;
You can define the thickness in either length units or keywords:
auto
is the default value which makes the browser choose the line thicknessfrom-font
chooses the thickness according to the font-size
Note: CSS
text-decoration-thickness
is an experimental property, so be aware of lower browser support.
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera

Safari
Latest Udacity Coupon Found:
75% OFF COURSES
Udacity Black Friday Offer
The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!