The CSS Text-Decoration Property

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.

Coloring the decoration line

The CSS text-decoration-color allows you to set the color for CSS underlines, overlines, and line-throughs:

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.

Theory is great, but we recommend digging deeper!

Cool CSS Tricks for Beginners: Essential Tips on How to Use CSS Code

John Bura

4.4 (162)

Styling CSS text decorations

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

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.

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

Chrome

1+

Edge

12+

Firefox

1+

IE

3+

Opera

3.5+

Safari

1+

Mobile browser support

Chrome

18+

Firefox

4+

Opera

All

Safari

All