Definition and Usage

The text-decoration property is a shorthand property that allows you to set multiple text decoration styles—text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness—in a single declaration.

Using this shorthand makes it possible to apply multiple text decoration properties at once, improving both code clarity and maintainability.

Omitted values are automatically set to the initial value of each corresponding property.

Basic Example

CSS Live Demo: text-decoration Click the demo button below!

Formal syntax

CSS 
selector {
    text-decoration: <'text-decoration-line'> || <'text-decoration-color'> || <'text-decoration-style'> || <'text-decoration-thickness'>
    /*  
        These values correspond to the properties:
        text-decoration-line,
        text-decoration-color,
        text-decoration-style,
        and text-decoration-thickness.
        
        The order of the values does not matter.
        Any omitted values will fall back to their initial values.
    */
}

Values

The text-decoration property accepts one or more space-separated values, which correspond to the values of the text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness properties. The order of these values does not matter.

Individual property values can be omitted in this shorthand property, and any omitted values are set to their respective initial values.

Accepted values for the text-decoration property
text-decoration-line Specifies the type of line decoration used on the text.
text-decoration-color Specifies the color of the line decorations set by text-decoration-line on the text.
text-decoration-style Specifies the style of the line decorations set by text-decoration-line on the text.
text-decoration-thickness Specifies the thickness of the line decorations set by text-decoration-line on the text.

Syntax

CSS 
text-decoration: underline;
text-decoration: overline blue;
text-decoration: none;

/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
text-decoration: revert;
text-decoration: revert-layer;

Formal definition

Formal definition of the text-decoration property
Initial value For each individual shorthand property:
text-decoration-line: none
text-decoration-color: currentcolor (The current text color of the element)
text-decoration-style: solid
text-decoration-thickness: auto
Applies to all elements
Inherited no

Practical Examples

HTML 
<p>This is a text decoration.</p>
CSS 
p {
    text-decoration: underline red;
}
/*
    The omitted text-decoration-style defaults to its initial value of solid.
    The omitted text-decoration-thickness defaults to its initial value of auto.
*/
Rendered Output

Important Notes

There are a few important things to keep in mind when using the text-decoration shorthand property.

Browser Compatibility

HTML 
<p>This is a text decoration</p>
CSS — Not supported in Safari Safari does not support text-decoration values that include text-decoration-thickness.
See browser compatibility for details. 
p {
    text-decoration: underline red 5px;
}
/*
    The omitted text-decoration-style defaults to its initial value of solid.
*/
CSS — Safari-Compatible Approach 
p {
    text-decoration: underline red;
    text-decoration-thickness: 5px;
}
/*
    The omitted text-decoration-style defaults to its initial value of solid.
*/
Rendered Output

Initial Values

HTML 
<p>This is a text decoration.</p>
CSS 
p {
    text-decoration: red;
}
/*
    The omitted text-decoration-line defaults to its initial value of none — this is important.
    The omitted text-decoration-style defaults to its initial value of solid.
    The omitted text-decoration-thickness defaults to its initial value of auto.
*/

In the example above, the omitted text-decoration-line is set to its initial value of none. The none value means that no decoration is applied to the text.

Rendered Output

Last updated: July 17, 2025

Browser compatibility for the text-decoration property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
text-decoration 1 12 1 1
text-decoration-color and text-decoration-style included in shorthand 57 79 6 8
text-decoration-thickness included in shorthand 87 87 70 Not supported

See more details on caniuse.com.

Specifications

Specification for the text-decoration property
Specification
text-decoration CSS Text Decoration Module Level 4
#text-decoration-property

References

See also