Web/CSS/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: 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	Status	Comment
CSS Text Decoration Module Level 4The definition of 'text-decoration-width' in that specification.	Working Draft	Initial definition.

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`text-decoration-thickness`	Chrome No support No	Edge No support No	Firefox Full support 70 Full support 70 Full support 69 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: `text-decoration-width` Disabled' From version 69: this feature is behind the `layout.css.text-decoration-width.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 12.1	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS Full support 12.2	Samsung Internet Android No support No
percentage values	Chrome No support No	Edge No support No	Firefox Full support 74	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.
Uses a non-standard name.': Uses a non-standard name.