CSS text-decoration Property – Shorthand for Text Decoration Styling

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

Formal syntax

CSS

selector {
    text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
    /*  
        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.
    */
}

Note:
The text-decoration-thickness property is not officially part of the text-decoration shorthand according to the CSS specification. However, most modern browsers—including Chrome and Firefox—support it in shorthand declarations. Safari does not support this behavior, so using text-decoration-thickness separately is recommended for full compatibility. See browser compatibility for more details!

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

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.
*/

Important Notes

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

Browser Compatibility

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.
*/

Initial Values

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.

Browser compatibility

Last updated: 2025-07-01

Browser compatibility for the text-decoration property
Property	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	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