The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

/* Single keyword */ text-decoration-thickness: auto; text-decoration-thickness: from-font;  /* length */ text-decoration-thickness: 0.1em; text-decoration-thickness: 3px;  /* percentage */ text-decoration-thickness: 10%;  /* Global values */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: revert; text-decoration-thickness: unset; 

text-decoration-thickness

The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

Syntax

/* Single keyword */ text-decoration-thickness: auto; text-decoration-thickness: from-font;  /* length */ text-decoration-thickness: 0.1em; text-decoration-thickness: 3px;  /* percentage */ text-decoration-thickness: 10%;  /* Global values */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: revert; text-decoration-thickness: unset; 

Values

auto

The browser chooses an appropriate width for the text decoration line.

from-font

If the font file includes information about a preferred thickness, use that value. If the font file doesn't include this information, behave as if auto was set, with the browser choosing an appropriate thickness.

<length>

Specifies the thickness of the text decoration line as a <length>, overriding the font file suggestion or the browser default.

<percentage>

Specifies the thickness of the text decoration line as a <percentage> of 1em in the current font. A percentage inherits as a relative value, and so therefore scales with changes in the font. The browser must use a minimum of 1 device pixel. For a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size.

Formal definition

Initial value	auto
Applies to	all elements. It also applies to ::first-letter and ::first-line.
Inherited	no
Percentages	refer to the font size of the element itself
Computed value	as specified
Animation type	by computed value type

Formal syntax

auto | from-font | <length> | <percentage> 

Examples

Varying thickness

HTML

<p class="thin">Here's some text with a 1px red underline.</p> <p class="thick">This one has a 5px red underline.</p> <p class="shorthand">This uses the equivalent shorthand.</p> 

CSS

.thin {   text-decoration-line: underline;   text-decoration-style: solid;   text-decoration-color: red;   text-decoration-thickness: 1px; }  .thick {   text-decoration-line: underline;   text-decoration-style: solid;   text-decoration-color: red;   text-decoration-thickness: 5px; }  .shorthand {   text-decoration: underline solid red 5px; } 

Results

Specifications

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

Note: The property used to be called text-decoration-width, but was updated in 2019 to text-decoration-thickness.

See also

text-decoration text-underline-offset

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)Français日本語中文 (简体) Change language