Definition and Usage

The text-decoration-thickness property specifies the thickness (or width) of text decoration lines, as defined by the text-decoration-line property.

Note:
This property was previously known as text-decoration-width but was updated to text-decoration-thickness in 2019.

Basic Example

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

Formal syntax

CSS 
selector {
    text-decoration-thickness: auto | from-font | <length-percentage>
}

Values

The text-decoration-thickness property specifies the thickness (or width) of decoration lines such as underline, overline, and line-through, as defined by the text-decoration-line property. The following values define how the thickness is calculated or applied.

Accepted values for the text-decoration-thickness property
auto The browser automatically chooses an appropriate thickness for the text decoration line.
from-font Uses the preferred thickness defined in the font file, if available. If not, the browser selects a suitable thickness.
<length> Specifies the thickness of the text decoration line using a fixed length value.
<percentage> Specifies the thickness as a percentage of 1em.

Syntax

CSS 
/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* length */
text-decoration-thickness: 0.12em;
text-decoration-thickness: 5px;

/* percentage */
text-decoration-thickness: 12%;

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

Formal definition

Formal definition of the text-decoration-thickness property
Initial value auto
Applies to all elements
Inherited no
Animatable yes

Note:
Although the specification defines this property as animatable, some browsers do not fully support animation for text-decoration-thickness.

Practical Examples

HTML 
<p>The text decoration thickness is 5px.</p>
CSS 
p {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: solid;
    text-decoration-thickness: 5px;
}
CSS text-decoration-color Property
CSS text-decoration-style Property
Rendered Output

Browser compatibility

Browser compatibility for the text-decoration-thickness property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
text-decoration-thickness 89 89 70 12.1

Specifications

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

References

See also