CSS text-decoration Property

What You’ll Learn

The text-decoration property adds decorative lines to text — underlines, overlines, strike-throughs, and custom styled lines using shorthand syntax.

Introduction

The text-decoration property in CSS is used to set text formatting to underline, overline, line-through, or a combination of these styles.

It is a shorthand property for several sub-properties that let you control the appearance of decorative lines on text, including line type, style, color, and thickness.

Definition and Usage

Apply text-decoration to any element that contains text, such as paragraphs, links, headings, and spans.

Use none to remove default link underlines, underline for emphasis or links, and line-through for discounted prices or deleted content.

📝 Syntax

The syntax for the text-decoration property is as follows:

element {
  text-decoration: value;
}

The value can be a keyword, a combination of line + style + color, or shorthand parts that control decoration appearance.

Basic Example

a {
  text-decoration: underline;
}

Shorthand Example

.highlight {
  text-decoration: underline wavy red;
}

Syntax Rules

• Use none to remove all decoration lines.
• Line keywords include underline, overline, and line-through.
• Style keywords include solid, double, dotted, dashed, and wavy.
• The property is not inherited, but links often look inherited because browsers apply default styles.

Related Properties

• text-decoration-line — sets which lines appear
• text-decoration-color — sets line color
• text-decoration-style — sets line style
• text-decoration-thickness — sets line thickness

🎯 Default Value

The default value of the text-decoration property is none, which means no decoration is applied to the text.

💎 Property Values

Shorthand Components

The shorthand can also include style, color, and thickness values:

When to Use text-decoration

text-decoration is useful whenever text needs a visual line treatment:

• Links — Underline clickable text, or remove underlines for navigation menus.
• Sale prices — Use line-through on old prices.
• Emphasis — Add underlines or wavy lines to highlight terms.
• Editorial styling — Create decorative heading or label treatments with overline or custom colors.

Examples Gallery

Start with the reference underline, overline, line-through, and wavy examples, then explore link styling, sale prices, and dotted underlines.

<style>
  .underline { text-decoration: underline; }
  .overline { text-decoration: overline; }
  .line-through { text-decoration: line-through; }
  .custom { text-decoration: underline wavy red; }
</style>

<p class="underline">This text is underlined.</p>
<p class="custom">This text has a wavy red underline.</p>

nav a {
  text-decoration: none;
  color: #2563eb;
}

nav a:hover {
  text-decoration: underline;
}

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

.new-price {
  color: #059669;
  font-weight: 700;
}

.help-link {
  text-decoration: underline dotted #2563eb;
  color: #1e40af;
}

text-decoration in the family

text-decoration is shorthand for line, style, color, and thickness. When you need finer control, use the longhand properties such as text-decoration-color and text-decoration-style.

.note-link {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #dc2626;
}

💡 Best Practices