The text-decoration-thickness CSS property sets the thickness, or width, 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;

/* 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 text decoration line as a <length>, overriding the font file suggestion or the browser default.

Formal syntax

auto | from-font | <length>


<p class="longhand">Here's some text with a 2px red underline.</p>
<p class="under-and-over">This one has under and overline.</p>
<p class="shorthand">This will have a 1px blue underline if shorthand is supported.</p>
.longhand { 
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 2px;

.under-and-over {
  text-decoration-line: underline overline;
  text-decoration-style: solid;
  text-decoration-color: orange;
  text-decoration-thickness: 0.2rem;

.shorthand {
  text-decoration: underline solid blue 1px;


Specification Status Comment
CSS Text Decoration Module Level 4
The 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
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decoration-thicknessChrome No support NoEdge No support NoFirefox 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 NoOpera No support NoSafari Full support 12.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 12.2Samsung Internet Android No support No


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.

See also