CSS text-decoration-thickness Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS text-decoration-thickness controlling underline stroke weight
Definition

Definition and Usage

The text-decoration-thickness property sets the stroke thickness of decoration lines—underline, overline, or line-through—created by text-decoration-line.

It is not inherited. The initial value is auto. Thickness alone is invisible until a line exists. For several decoration settings at once, prefer the text-decoration shorthand.

Note Former name: text-decoration-width

An early draft used text-decoration-width. The standard name is text-decoration-thickness—use that in new CSS.

Syntax

CSS Syntax

syntax.css
text-decoration-thickness: auto | from-font | <length> | <percentage> | initial | inherit;

Percentages refer to the element’s font size (1em). A percentage inherits as a relative value, so it scales if the font size changes.

Values

Property Values

ValueDescriptionTry it
autoDefault. Browser chooses a thicknessTry it
from-fontUse the font’s preferred thickness when availableTry it
<length>Fixed thickness, e.g. 3px or 0.12emTry it
<percentage>Relative to 1em of the element font sizeTry it
initialResets to autoTry it
inheritTakes the parent’s thicknessTry it
Approach

How to Use text-decoration-thickness

Turn a decoration line on first, then set how thick it should be.

  1. Set a line with text-decoration-line: underline (or use the shorthand).
  2. Choose auto, from-font, a length, or a percentage.
  3. Optionally set text-decoration-color and text-decoration-style.
  4. Prefer em or % when the underline should grow with the font size.
PieceRequired?Role
Decoration lineYesunderline, overline, or line-through
Thickness valueYesHow heavy that line is drawn
Color / styleOptionalRefine look without changing weight
ShorthandOptionaltext-decoration: underline solid red 3px
Try it

Live Preview

Change the underline thickness on a fixed sample. The line stays; only the stroke weight changes.

Needs a decoration line (already set). Color is red only so the thickness is easy to see.

Decoration preview
Confusion kissed me on the cheek

text-decoration-thickness: 3px

Code

CSS Examples

Each snippet focuses on text-decoration-thickness. A decoration line is included only so the thickness is visible. Use Try It Yourself for a live editor.

Example 1 — Browser Auto

Let the browser pick a thickness that fits the font.

CSS
<style>
  .link {
    text-decoration-line: underline;
    text-decoration-thickness: auto;
  }
</style>

<p class="link">Auto thickness</p>
Try It Yourself

How It Works

  1. Turn a line on. text-decoration-line: underline draws the line.
  2. Use auto. The browser chooses a sensible stroke weight.
  3. Default behavior. Leaving thickness unset looks the same as auto.
  4. Good starting point. Override with a length only when you need a specific look.

Example 2 — Fixed Pixel Thickness

Set an exact thickness in pixels for a bold underline.

CSS
<style>
  .thick {
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
  }
</style>

<p class="thick">3px underline</p>
Try It Yourself

How It Works

  1. Keep the underline. Thickness never creates the line by itself.
  2. Set a length. 3px forces a fixed stroke weight.
  3. Same for all lines. If you also set overline, both share this thickness.
  4. Shorthand option. text-decoration: underline solid currentColor 3px sets it in one rule.

Example 3 — Scale With Font Size

Use em (or a percentage) so the underline grows with the text.

CSS
<style>
  .scale {
    font-size: 1.5rem;
    text-decoration-line: underline;
    text-decoration-thickness: 0.12em;
  }
</style>

<p class="scale">0.12em underline</p>
Try It Yourself

How It Works

  1. Pick a relative unit. 0.12em ties thickness to the element font size.
  2. Scale together. Larger text gets a proportionally thicker line.
  3. Percentages work too. 10% refers to 1em of the same element.
  4. Box-wide constant. Thickness stays one value for the whole box, even if children use a different font size.

Edge Cases & Pitfalls

If the line looks unchanged, check these first.

line

Thickness needs a decoration line

Without underline, overline, or line-through, changing thickness has no visible effect.

from-font

from-font may look like auto

If the font has no underline metrics, browsers fall back to auto. Not every font exposes preferred thickness.

%

Percentages are relative to 1em

They refer to the element font size, not the viewport. Support for percentages landed later than length values in some browsers.

shorthand

Shorthand can reset longhands

A later text-decoration rule can override a previous thickness. Watch cascade order.

name

Do not use text-decoration-width

That was an old draft name. Current CSS uses text-decoration-thickness only.

Compatibility

Browser Support

text-decoration-thickness is a browser text-decoration property. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

text-decoration-thickness

Interoperable across modern browsers since about March 2021. Internet Explorer does not support this property.

95% Modern browsers
Google Chrome 89+
Full
Mozilla Firefox 70+
Full
Apple Safari 12.1+
Full
Microsoft Edge 89+
Full
Opera 75+
Full
Samsung Internet 15+
Full
Internet Explorer No
None
text-decoration-thickness Widely supported

Bottom line: Safe for modern sites. Percentage values reached wider Safari support later than length values; IE has no support.

Remember

Key Takeaways

  • Role: set how thick decoration lines are drawn.
  • Values: auto, from-font, length, or percentage.
  • Initial value: auto. Not inherited. Needs a decoration line first.
  • Scale tip: use em or % when thickness should follow font size.

One line: text-decoration-thickness controls the weight of an underline, overline, or line-through.

Frequently Asked Questions

It sets how thick decoration lines are, such as underlines, overlines, and line-throughs. A decoration line must already exist from text-decoration-line or the shorthand.
The initial value is auto. The browser chooses a thickness based on the font and decoration type.
If the font file includes preferred underline metrics, the browser uses that thickness. If not, it behaves like auto.
Use px for a fixed thickness. Use em or a percentage when you want the line to scale with the element font size. Percentages refer to 1em of the element font.
Yes. An earlier draft name was text-decoration-width. The standard name today is text-decoration-thickness.
It is Baseline Widely available (interoperable since about March 2021): Chrome/Edge 89+, Firefox 70+, Safari 12.1+. Internet Explorer does not support it. It is a browser rendering property, not a Node.js feature.

Next: text-emphasis

Learn how to add emphasis marks beside East Asian and other text.

text-emphasis tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS text-decoration-style Property CSS text-emphasis Property