CSS Text Decoration Styles: Complete Guide with Examples

CSS Text Decoration Styles

Text decoration is an important part of CSS typography. It allows you to add visual lines and other styling effects to text, such as underlines, overlines, and line-through effects. These styles are commonly used for links, headings, navigation menus, emphasized text, prices, edited content, and interactive elements.

CSS provides several properties that give you precise control over text decorations. Instead of simply adding an underline, you can control its type, color, thickness, position, and appearance.

The main CSS properties used for text decoration are:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration-skip-ink
• text-underline-offset

You can also use the shorthand text-decoration property to combine several decoration settings into one declaration.

What Is CSS Text Decoration?

CSS text decoration refers to visual lines drawn around or through text. The most familiar example is an underline:

p {
  text-decoration-line: underline;
}

This produces an underline beneath the text.

Text decoration is different from border-bottom. A text decoration belongs to the text itself, while a border belongs to the element’s box. This distinction becomes particularly useful when you need precise control over the appearance and position of an underline.

For example:

a {
  text-decoration: underline;
}

is generally more appropriate for an actual text underline than:

a {
  border-bottom: 1px solid;
}

because CSS text decoration has dedicated controls for thickness, style, color, offset, and ink skipping.

The text-decoration-style Property

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

It can be used with underlines, overlines, and line-through decorations.

The basic syntax is:

element {
  text-decoration-style: value;
}

The main values are:

• solid
• double
• dotted
• dashed
• wavy

There is also the value inherit, which makes the element inherit the decoration style from its parent.

1. Solid Text Decoration

The solid value creates a normal continuous line.

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

A solid underline is the default and most commonly used style.

It is suitable for:

• Website links
• Navigation items
• Headings
• Important text
• Simple emphasis

You can often omit text-decoration-style: solid because solid is the default decoration style in normal cases.

For example:

a {
  text-decoration: underline;
}

is effectively a simple solid underline.

2. Double Text Decoration

The double value creates two parallel decoration lines.

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

Double underlines can be useful when you want stronger visual emphasis.

For example:

.important {
  text-decoration-line: underline;
  text-decoration-style: double;
}

Double decoration should be used carefully because it can make text look visually heavier. It is generally better for special emphasis than for large amounts of body text.

3. Dotted Text Decoration

The dotted value creates a decoration made up of dots.

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

Dotted underlines can be useful for:

• Interactive hints
• Special labels
• Educational interfaces
• Terms with additional information
• Custom UI designs

For example:

.info {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

A dotted underline can visually suggest that something has additional information without looking exactly like a standard hyperlink.

4. Dashed Text Decoration

The dashed value creates a broken line made up of dashes.

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

Dashed decoration can be useful for custom designs, labels, or interfaces where a normal underline would be too strong.

Example:

.special-link {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

Like dotted decoration, dashed decoration is generally more appropriate for specific design purposes than for ordinary paragraphs.

5. Wavy Text Decoration

The wavy value creates a wave-shaped decoration.

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

This is particularly useful for indicating errors, warnings, or special states.

For example:

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

A common use is a spelling or grammar indicator:

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

The wavy style is visually distinctive and immediately draws attention to the decorated text.

CSS Text Decoration Styles Example

Here is a simple example showing several decoration styles:

<p class="solid">Solid underline</p>
<p class="double">Double underline</p>
<p class="dotted">Dotted underline</p>
<p class="dashed">Dashed underline</p>
<p class="wavy">Wavy underline</p>

.solid {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
.double {
  text-decoration-line: underline;
  text-decoration-style: double;
}
.dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
.dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

This example demonstrates how the same underline can be given completely different visual appearances.

text-decoration-line

Before choosing a decoration style, you need to decide where the decoration should appear.

The text-decoration-line property specifies the type of decoration.

Common values include:

text-decoration-line: underline;

text-decoration-line: overline;

text-decoration-line: line-through;

You can also combine values:

text-decoration-line: underline overline;

Underline

An underline appears below the text:

h2 {
  text-decoration-line: underline;
}

Overline

An overline appears above the text:

h2 {
  text-decoration-line: overline;
}

Line-through

A line-through places a line through the text:

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

This is commonly used to show an original price:

<span class="old-price">$100</span>
<span>$75</span>

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

Combining Decorations

Multiple decoration lines can be used together:

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

You can also combine an underline and line-through:

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

However, multiple decorations should be used thoughtfully because excessive decoration can reduce readability.

text-decoration-color

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

a {
  text-decoration-line: underline;
  text-decoration-color: blue;
}

The text and decoration do not have to use the same color.

For example:

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

This allows designers to create more distinctive typography.

You can also use modern CSS color formats:

.example {
  text-decoration-color: rgb(255 0 0);
}

or:

.example {
  text-decoration-color: #e63946;
}

text-decoration-thickness

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

a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

You can use different units depending on your design:

.example {
  text-decoration-thickness: 0.15em;
}

Using relative units such as em can help the decoration scale with the font size.

The value auto allows the browser to determine an appropriate thickness.

You can also use:

text-decoration-thickness: from-font;

when you want the browser to use the font’s recommended decoration thickness when supported.

text-underline-offset

The text-underline-offset property controls the distance between the text and its underline.

For example:

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

A larger value moves the underline farther away from the text.

This can improve readability, especially when using large fonts or decorative typefaces.

Example:

.heading {
  text-decoration: underline;
  text-underline-offset: 8px;
}

The property is particularly useful when you want an underline to feel like part of a visual design rather than a default browser decoration.

text-decoration-skip-ink

The text-decoration-skip-ink property controls whether an underline or other decoration should avoid passing directly through parts of letters.

For example:

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

With ink skipping enabled, the browser can leave small gaps around parts of characters that extend into the decoration area.

For example, letters with descenders such as g, p, and y may interact with an underline.

The common values are:

text-decoration-skip-ink: auto;

and:

text-decoration-skip-ink: none;

auto generally provides a more natural appearance for text underlines.

The text-decoration Shorthand

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

For example:

a {
  text-decoration: underline solid blue 2px;
}

This can specify:

• Decoration line
• Decoration style
• Decoration color
• Decoration thickness

A more detailed example is:

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

This creates a red, 2-pixel, wavy underline.

You can also write a simpler declaration:

a {
  text-decoration: underline;
}

The shorthand is convenient when you want to define multiple decoration properties in one place.

Understanding the Difference Between Text Decoration and Border

A common CSS technique is to create an underline using border-bottom.

For example:

a {
  border-bottom: 2px solid;
}

However, this is not the same as:

a {
  text-decoration: underline;
}

Text decoration is specifically designed to decorate text, while a border is part of the element’s box.

Text decoration offers dedicated controls such as:

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

For accessible text links, using the actual text-decoration property is usually preferable because it communicates the intended semantic presentation more clearly.

Styling Links with Text Decoration

Links are one of the most common places to use text decoration.

A simple link style is:

a {
  text-decoration: underline;
}

You can create a more customized style:

a {
  color: #0645ad;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

You can also change the decoration when the user hovers over the link:

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

This is common in modern navigation designs, although links should remain visually identifiable and keyboard-accessible.

Using Wavy Decorations for Errors

The wavy style is especially useful for error indicators.

.error {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML:

<p class="error">This word contains an error.</p>

This creates a visual effect similar to spelling-error indicators found in many text editors.

For a real form or validation interface, however, do not rely only on the wavy underline to communicate an error. Provide a clear text or accessible status message as well.

Creating a Modern Link Underline

You can combine several properties to create a polished link style:

a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

This approach gives you more control than simply writing:

a {
  text-decoration: underline;
}

The result can be particularly attractive for article links, navigation elements, and headings.

Text Decoration with Hover Effects

Text decoration can be combined with CSS transitions and hover states.

For example:

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

You can also change the decoration style:

a:hover {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

For professional websites, avoid excessive animation or unusual decoration styles that make links harder to recognize.

Text Decoration in Navigation Menus

Navigation menus often remove the default underline:

nav a {
  text-decoration: none;
}

An underline can then be added to the active or hovered link:

nav a:hover,
nav a.active {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

This creates a simple visual indicator without requiring additional HTML elements.

Text Decoration for Prices

The line-through decoration is frequently used for discounted prices.

.original-price {
  text-decoration-line: line-through;
  text-decoration-style: solid;
}

Example:

<span class="original-price">$120</span>
<span class="sale-price">$90</span>

The original price becomes visually crossed out while the current price remains prominent.

For important pricing information, the HTML structure and accessible labeling should still make the current price clear to users and assistive technologies.

Text Decoration for Headings

Underlines and overlines can be used as decorative elements for headings.

h2 {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

For content-heavy educational websites, subtle decoration is usually better than heavy effects because it keeps the page easy to scan.

Text Decoration and Inheritance

Text decorations behave differently from many ordinary CSS properties.

If a parent element has a text decoration, its descendants can be affected by that decoration. Simply setting:

.child {
  text-decoration: none;
}

does not always behave like removing an inherited color or font property.

For example:

.parent {
  text-decoration: underline;
}

A child element may still appear decorated because the decoration is propagated from the parent.

This is one reason why understanding CSS text decoration is important when designing complex interfaces.

Multiple Decoration Properties Together

For maximum control, you can write each property separately:

.custom-text {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #333;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

This approach is particularly useful when learning CSS because each property has a clearly defined purpose.

Once you are comfortable with them, you can use the shorthand:

.custom-text {
  text-decoration: underline dashed #333 2px;
  text-underline-offset: 5px;
}

Common Mistakes with CSS Text Decoration

Using border-bottom for every underline

A border can be useful for certain designs, but it should not automatically replace text decoration.

Use text decoration when you specifically want to decorate text.

Removing all link underlines

This is common:

a {
  text-decoration: none;
}

Removing underlines can make links harder to identify, particularly inside paragraphs. If you remove the underline, make sure another clear visual distinction remains, such as color, weight, or another accessible interaction cue.

Making decoration too thick

A very thick underline can interfere with letter shapes and reduce readability.

Instead of:

text-decoration-thickness: 8px;

use a subtle value appropriate for the font size.

Using too many decoration styles

Combining multiple lines, unusual colors, and thick decorations can make content look cluttered.

Text decoration works best when it supports the content rather than competing with it.

Using color alone

Do not rely only on decoration color to communicate meaning. Some users may have difficulty distinguishing certain colors.

Browser Compatibility

Modern browsers generally provide strong support for CSS text-decoration features, including:

• text-decoration-line
• text-decoration-style
• text-decoration-color
• text-decoration-thickness
• text-underline-offset
• text-decoration-skip-ink

For production websites, it is still sensible to test typography across the browsers and devices that your audience uses.

A basic declaration such as:

a {
  text-decoration: underline;
}

has extremely broad support and should be preferred when advanced decoration control is unnecessary.

Best Practices for CSS Text Decoration

For clean and readable websites, keep these principles in mind:

Use underlines for links.
Users commonly associate underlined text with clickable links.

Choose decoration styles according to purpose.
Solid lines are suitable for general links, while wavy lines can communicate errors or warnings.

Keep decoration subtle.
The goal is to improve hierarchy and interaction, not overwhelm the reader.

Use text-underline-offset when necessary.
A small gap can make underlines easier to read.

Choose appropriate thickness.
Decoration should complement the font rather than dominate it.

Maintain sufficient contrast.
Decoration should remain visible against the background.

Do not rely only on decoration for meaning.
Use text, labels, icons, or other semantic information where necessary.

Test responsive layouts.
Decoration that looks good on a desktop screen may look too heavy on smaller displays.

A Complete CSS Text Decoration Example

The following example brings the main properties together:

<div class="decoration-demo">
  <p class="solid">Solid underline</p>
  <p class="double">Double underline</p>
  <p class="dotted">Dotted underline</p>
  <p class="dashed">Dashed underline</p>
  <p class="wavy">Wavy underline</p>
  <p class="through">Line-through text</p>
  <p class="overline">Overline text</p>
</div>

.decoration-demo p {
  font-size: 20px;
  margin: 15px 0;
}
.solid {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.double {
  text-decoration-line: underline;
  text-decoration-style: double;
}
.dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
.dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
.through {
  text-decoration-line: line-through;
}
.overline {
  text-decoration-line: overline;
}

This example demonstrates the most important text decoration styles in one place.

CSS Text Decoration Cheat Sheet

Final Example

A practical modern link style might look like this:

.article-link {
  color: #1a4fd7;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}
.article-link:hover {
  text-decoration-thickness: 2px;
}

This keeps the link recognizable while providing precise control over its appearance.

Conclusion

CSS text decoration is much more powerful than simply adding or removing an underline. With text-decoration-line, you can choose whether to use an underline, overline, or line-through. With text-decoration-style, you can create solid, double, dotted, dashed, or wavy lines. Additional properties such as text-decoration-color, text-decoration-thickness, text-underline-offset, and text-decoration-skip-ink give you even finer control.

For most websites, the best approach is to keep text decoration simple, readable, consistent, and meaningful. Use standard underlines for links, specialized styles such as wavy decoration for appropriate UI states, and avoid excessive visual effects.

Once these properties are combined effectively, CSS text decoration becomes a useful tool for improving typography, hierarchy, interaction, and overall user experience.