🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

The CSS Text-Decoration Property

Reading time 2 min
Published Aug 8, 2017
Updated Sep 27, 2019

Using text decorations in CSS

The CSS text-decoration property specifies visual decorative lines for text:

Example
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:

Example
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:

Example
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:

Example
p {
    text-decoration: overline;
    text-decoration-color: green;
}

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Styling CSS text decorations

The CSS text-decoration-style allows you to define how to display the text decoration line:

Example
a {
    text-decoration: overline; 
    text-decoration-style: dashed; 
}

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 thickness
  • from-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

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
3+
Browser image
Opera
3.5+
Browser image
Safari
1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All