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: unset;


The browser chooses an appropriate width for the text decoration line.
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.
Specifies the thickness of the text decoration line as a <length>, overriding the font file suggestion or the browser default.
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>


Varying thickness


<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>


.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;



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

Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
text-decoration-thickness No No 70
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.
No No 12.1
percentage values No No 74 No No No
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
text-decoration-thickness No No No No 12.2 No
percentage values No No No No No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.