CSS text-decoration-thickness Property

What You’ll Learn

The text-decoration-thickness property controls how thick decoration lines appear — using auto, from-font, length, or percentage values.

Introduction

The text-decoration-thickness property in CSS allows web developers to control the thickness of text decoration lines, such as underlines, overlines, and line-throughs.

This property provides more fine-grained control over the appearance of these decorations, allowing for better customization and design flexibility.

Definition and Usage

Use text-decoration-thickness when a decoration line already exists and you want to make it thicker or thinner. Pair it with text-decoration-line, text-decoration-style, and text-decoration-color for full control.

It is the longhand alternative to setting thickness inside the text-decoration shorthand.

📝 Syntax

The syntax for the text-decoration-thickness property is straightforward. It can be applied to any text element, and you can specify the thickness using various units or keywords:

element {
  text-decoration-thickness: value;
}

Here, value can be a length (e.g., 2px, 0.1em), a percentage, or a keyword.

Basic Example

p {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

Syntax Rules

• Set a decoration line before applying text-decoration-thickness.
• Use keywords auto or from-font, or length values like 2px and 0.1em.
• Percentage values are relative to the element’s font size.
• Pair with line, style, and color longhands for complete decoration control.

Related Properties

• text-decoration — shorthand for line, style, color, and thickness
• text-decoration-line — sets which lines appear
• text-decoration-style — sets solid, dotted, dashed, or wavy lines
• text-decoration-color — sets decoration line color

🎯 Default Value

The default value of the text-decoration-thickness property is auto, which means the thickness is determined by the browser and is typically based on the font size and type.

💎 Property Values

When to Use text-decoration-thickness

text-decoration-thickness is the right choice when you need precise control over decoration line weight:

• Links — Make underlines bolder for better visibility on large headings.
• Accessibility — Increase underline thickness so link cues are easier to see.
• Branding — Match decoration weight to your design system spacing scale.
• Responsive text — Use em or % so thickness scales with font size.

Examples Gallery

In this example, we’ll set the thickness of the underline for a paragraph to 3px, then explore practical thickness patterns.

<style>
  p {
    text-decoration: underline;
    text-decoration-thickness: 3px;
  }
</style>

<p>This is an example paragraph with a thick underline.</p>

a.cta-link {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-decoration-color: #2563eb;
  font-size: 1.25rem;
}

.old-price {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: #94a3b8;
}

.help-link {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #dc2626;
  text-decoration-thickness: 2px;
}

text-decoration-thickness in the family

text-decoration-thickness controls line weight. Combine it with text-decoration-line, text-decoration-style, and text-decoration-color, or use the text-decoration shorthand when you want all parts in one declaration.

.brand-link {
  text-decoration-line: underline;
  text-decoration-color: #2563eb;
  text-decoration-thickness: 0.12em;
}

💡 Best Practices