This property is used to specify the thickness of decoration lines added to text.

Initial Value auto
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation Depends on value type

The text-decoration-thickness property specifies the thickness of the decorative lines added to the text/characters. By default, the thickness is automatically – auto – calculated by the browser. 

You can also change the value if the font file contains recommended weight information. E.g. 500.

If you want to add decorative lines to your text, first, you can use text-decoration-line to specify the type of line. 

By default, this is set to none so that even if you change the thickness, it will not be displayed.

It is also possible to change the color and shape of the decoration line. Each value is manipulated by the properties below, but you can also use the text-decoration shorthand property.


/* keyword values */

text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* length values */

text-decoration-thickness: 2px;
text-decoration-thickness: 0.2em;

/* percentage values */

text-decoration-thickness: 15%;

/* global values */

text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: unset;