text-decoration-thickness
Quick Summary for 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.
Code Usage for text-decoration-thickness
/* 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; 
More Details for text-decoration-thickness

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 valueauto
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Percentagesrefer to the font size of the element itself
Computed valueas specified
Animation typeby 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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
The problem with hoarding is you end up living off your reserves. Eventually, you’ll become stale. If you give away everything you have, you are left with nothing. This forces you to look, to be aware, to replenish. . . . Somehow the more you give away, the more comes back to you.
Paul Arden
Random CSS Property

overscroll-behavior-inline

The overscroll-behavior-inline CSS property sets the browser's behavior when the inline direction boundary of a scrolling area is reached.
overscroll-behavior-inline css reference