CSS Text Decoration: Complete Guide with Examples

CSS Text Decoration

Text is one of the most important parts of any website. Whether you are creating navigation links, headings, buttons, articles, or simple paragraphs, the way text looks can strongly affect readability and visual appeal.

CSS provides the text-decoration property to add, remove, and customize decorative lines around text. The most familiar example is the underline that appears below links, but modern CSS provides much more control over text decoration.

With CSS text decoration, you can control the type of decoration, its color, thickness, and style. You can also combine multiple decorations to create different visual effects.

What Is CSS Text Decoration?

CSS text decoration refers to the visual lines or other decorative effects applied to text.

The main CSS property is:

text-decoration

For example:

p {
  text-decoration: underline;
}

This places a line underneath the text.

Text decoration is commonly used for:

• Underlining links
• Removing the default underline from links
• Creating overlines
• Adding strikethrough text
• Changing the decoration color
• Changing the thickness of the decoration
• Changing the decoration style
• Combining multiple text decorations

The text-decoration property is especially useful because it lets you control text decoration without changing the actual content of the HTML element.

Basic Syntax

The basic syntax is:

selector {
  text-decoration: value;
}

For example:

a {
  text-decoration: underline;
}

Here, all links represented by the <a> element will have an underline.

You can also remove a decoration:

a {
  text-decoration: none;
}

This is frequently used when designing navigation menus or custom buttons.

Types of Text Decoration

CSS supports several common text decoration types.

Underline

The underline value places a line below the text.

p {
  text-decoration: underline;
}

Example:

<p>This text is underlined.</p>

Underlining is particularly useful for links and for emphasizing specific pieces of content.

However, avoid underlining ordinary text unnecessarily because users often associate underlined text with clickable links.

Overline

The overline value places a line above the text.

h2 {
  text-decoration: overline;
}

You can use this effect for decorative headings or special visual designs.

Line Through

The line-through value places a line through the middle of the text.

.old-price {
  text-decoration: line-through;
}

This is commonly used for:

• Old prices
• Deleted information
• Completed tasks
• Corrections
• Outdated content

For example:

<p class="old-price">$100</p>

The text would appear with a line crossing through it.

None

The none value removes text decoration.

a {
  text-decoration: none;
}

This is one of the most frequently used values.

For example, browsers normally display links with an underline. You can remove that underline with:

a {
  text-decoration: none;
}

Although removing underlines can create a cleaner design, make sure clickable links remain visually recognizable through color, spacing, hover effects, or another clear visual indicator.

The text-decoration-line Property

CSS also provides individual properties for more precise control.

The text-decoration-line property specifies which line or lines should be applied to the text.

Syntax:

selector {
  text-decoration-line: value;
}

Common values include:

underline
overline
line-through
none

For example:

.title {
  text-decoration-line: underline;
}

You can also combine decorations:

.title {
  text-decoration-line: underline overline;
}

This creates both an underline and an overline.

Multiple values can also be used:

.example {
  text-decoration-line: underline line-through;
}

The text-decoration-color Property

The text-decoration-color property controls the color of the decorative line.

For example:

p {
  text-decoration-line: underline;
  text-decoration-color: red;
}

The text remains its original color while the underline becomes red.

You can also use other CSS color formats:

p {
  text-decoration-color: #2563eb;
}

Or:

p {
  text-decoration-color: rgb(37, 99, 235);
}

This separation between text color and decoration color gives designers more control over the appearance of links and highlighted content.

The text-decoration-style Property

The text-decoration-style property controls the visual style of the decoration line.

Common values include:

• solid
• double
• dotted
• dashed
• wavy

For example:

p {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

This creates a dashed underline.

Solid

p {
  text-decoration-style: solid;
}

A solid line is the normal and most common style.

Double

p {
  text-decoration-line: underline;
  text-decoration-style: double;
}

This creates two parallel decoration lines.

Dotted

p {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

The decoration appears as a series of dots.

Dashed

p {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

The decoration appears as a series of short dashes.

Wavy

p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

A wavy line can be useful for highlighting warnings or creating decorative effects.

The text-decoration-thickness Property

The text-decoration-thickness property controls how thick the decoration line appears.

For example:

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

A thicker underline can make links or highlighted text more visually prominent.

You can use different units:

p {
  text-decoration-thickness: 2px;
}

You can also use:

p {
  text-decoration-thickness: 0.15em;
}

Relative units can be useful when you want the decoration to scale with the text.

The auto and from-font values can also be used to allow the browser or font to determine an appropriate thickness.

The text-underline-offset Property

Modern CSS provides another useful property called:

text-underline-offset

It controls the distance between the text and its underline.

For example:

a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

The underline is moved slightly farther away from the letters.

This can make underlined text easier to read and can produce a cleaner visual appearance.

You can also use relative units:

a {
  text-underline-offset: 0.2em;
}

This allows the offset to scale with the font size.

The text-decoration-skip-ink Property

The text-decoration-skip-ink property controls whether an underline or other decoration should avoid passing through parts of letters that extend below or above the normal text line.

For example:

a {
  text-decoration-skip-ink: auto;
}

This is particularly useful with underlines because letters such as g, p, q, and y can have parts that extend below the baseline.

With:

text-decoration-skip-ink: auto;

the browser can create a more natural-looking underline by avoiding parts of glyphs where appropriate.

Another value is:

text-decoration-skip-ink: none;

This forces the decoration to continue through the glyphs.

The text-decoration Shorthand Property

Instead of writing several separate properties, you can use the shorthand text-decoration property.

For example:

a {
  text-decoration: underline red wavy 2px;
}

This can specify multiple aspects of the decoration in one declaration.

The longhand properties are:

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness

Using the shorthand can make CSS shorter and easier to maintain when you know exactly what you want.

Difference Between text-decoration and text-decoration-line

These properties are related but serve different purposes.

text-decoration is a shorthand property that can define several decoration characteristics.

a {
  text-decoration: underline red;
}

text-decoration-line specifically controls the type of decoration.

a {
  text-decoration-line: underline;
}

For simple designs, text-decoration is often convenient. For more detailed styling, the individual properties provide better control.

Styling Links with Text Decoration

Links are one of the most common places where text decoration is used.

A simple link:

a {
  text-decoration: underline;
}

You can remove the default underline:

a {
  text-decoration: none;
}

Then add it back when the user moves the mouse over the link:

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

This creates a clean navigation design while still providing a visual hover indication.

You can also customize the underline:

a {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

Creating a Modern Link Effect

A simple modern link design might look like this:

a {
  color: #2563eb;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}

This provides a subtle underline that becomes stronger when the user hovers over the link.

Combining Multiple Decorations

CSS allows multiple decoration lines.

For example:

.example {
  text-decoration-line: underline overline;
}

You can also combine a line-through with an underline:

.example {
  text-decoration-line: underline line-through;
}

Although multiple decorations can be visually interesting, they should be used carefully. Too many lines can reduce readability.

Text Decoration and Text Color Are Different

It is important to understand that text-decoration-color controls the decoration, not the text itself.

For example:

p {
  color: black;
  text-decoration-line: underline;
  text-decoration-color: red;
}

The text will remain black while the underline will be red.

If you want to change the text color, use:

color

For example:

p {
  color: red;
}

This distinction is useful when creating sophisticated typography.

Text Decoration vs Border Bottom

Developers sometimes use border-bottom as an alternative to an underline.

For example:

a {
  border-bottom: 2px solid;
}

This is not the same as:

a {
  text-decoration: underline;
}

Text decoration is specifically associated with text glyphs and has specialized controls such as:

text-decoration-thickness
text-underline-offset
text-decoration-style
text-decoration-color

A border belongs to the element’s box.

For normal text underlining, text-decoration is generally the more appropriate choice.

Text Decoration in Navigation Menus

Navigation menus often remove default link underlines.

For example:

nav a {
  text-decoration: none;
}

A hover effect can then be added:

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

For a more polished appearance:

nav a {
  text-decoration: none;
}
nav a:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

This produces a clean underline effect without requiring additional HTML elements.

Text Decoration for Prices

The line-through decoration is particularly useful for displaying discounted prices.

.old-price {
  text-decoration: line-through;
}

HTML:

<span class="old-price">$80</span>
<span>$60</span>

The old price can be visually separated from the current price.

Text Decoration for Completed Tasks

A completed task can also use line-through.

.completed {
  text-decoration: line-through;
}

For example:

<p class="completed">Finish the CSS tutorial</p>

This visually communicates that the task has been completed.

Wavy Underlines

Wavy decorations can be useful when you want to draw attention to text.

.warning {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

You can combine this with a custom color:

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

This style can be useful for warnings, spelling-related interfaces, or special annotations.

Dashed and Dotted Underlines

You can create a dashed underline:

.example {
  text-decoration: underline dashed;
}

Or a dotted underline:

.example {
  text-decoration: underline dotted;
}

These styles can help distinguish special text from standard links.

Double Underlines

A double underline can be created using:

.example {
  text-decoration: underline double;
}

You can also control its color and thickness:

.example {
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-thickness: 2px;
}

CSS Text Decoration with Hover Effects

Text decoration works particularly well with pseudo-classes such as :hover.

Example:

.article-link {
  text-decoration: none;
}
.article-link:hover {
  text-decoration: underline;
}

You can create a more refined effect:

.article-link {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
.article-link:hover {
  text-decoration-color: currentColor;
}

This can create a subtle interactive effect.

Accessibility Considerations

Text decoration is not only a design feature. It can also affect accessibility and usability.

Links should be clearly distinguishable from ordinary text. Removing every underline from links can make it difficult for users to identify clickable content.

A good design can combine several indicators, such as:

• Text color
• Underlines
• Hover effects
• Focus styles
• Appropriate spacing
• Clear link wording

Keyboard users should also be able to identify focused links.

For example:

a:focus-visible {
  outline: 2px solid;
  outline-offset: 3px;
}

This provides a visible focus indicator without relying only on text decoration.

Common Mistakes with CSS Text Decoration

Removing all link underlines

This is common:

a {
  text-decoration: none;
}

There is nothing technically wrong with it, but if no other visual distinction is provided, users may not recognize links.

Overusing decorative lines

Underlines, overlines, and line-through effects should have a purpose. Excessive decoration can make a page difficult to read.

Using borders unnecessarily

A border-bottom can sometimes be useful, but it is not always a replacement for text decoration. Use the tool that best matches the intended design.

Ignoring focus styles

Do not remove visual indicators without providing an accessible alternative for keyboard navigation.

Practical Example

Here is a complete example demonstrating several text-decoration properties:

<p class="normal">Normal text</p>
<p class="underline">Underlined text</p>
<p class="overline">Overlined text</p>
<p class="strike">Strikethrough text</p>
<p class="fancy">Styled underline</p>

.normal {
  text-decoration: none;
}
.underline {
  text-decoration: underline;
}
.overline {
  text-decoration: overline;
}
.strike {
  text-decoration: line-through;
}
.fancy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

This example demonstrates how different properties can be combined to create different text effects.

Browser Support

Modern CSS text-decoration properties are well supported by current major browsers. Basic properties such as text-decoration, text-decoration-line, text-decoration-color, and text-decoration-style are widely available.

When developing websites for older browsers or unusual environments, it is still good practice to test important visual effects.

For production websites, progressive enhancement is often a sensible approach: provide a useful default style and then add more advanced decoration features where supported.

Best Practices for CSS Text Decoration

For clean and accessible websites, keep these practices in mind:

1. Use text-decoration for actual text decoration.
2. Use underlines carefully so users can distinguish links from ordinary text.
3. Use text-decoration-thickness to control line weight.
4. Use text-underline-offset when additional spacing improves readability.
5. Use text-decoration-color when the decoration needs a separate color.
6. Use text-decoration-style for dotted, dashed, double, or wavy effects.
7. Use line-through for deleted, outdated, or completed content.
8. Avoid excessive decorative effects.
9. Maintain visible focus indicators for keyboard users.
10. Test your text decoration on different screen sizes and browsers.

Quick Reference

Common decoration values include:

Final Thoughts

CSS text decoration is much more powerful than simply adding an underline. With properties such as text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness, developers can create precise and attractive text effects.

Modern properties such as text-underline-offset and text-decoration-skip-ink provide even greater control over the appearance and readability of underlined text.

The key is to use text decoration with purpose. A simple underline can make a link recognizable, a line-through can communicate completed or outdated information, and a carefully styled decoration can add personality to a design without compromising readability.

Once you understand the individual text-decoration properties, you can create everything from simple accessible links to polished typography effects using clean CSS.