CSS text-decoration Property

Definition and Usage

The text-decoration property is a shorthand for decorative lines on text. It sets text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness.

Common uses are underlines on links, strike-through for deleted text, and none to remove a default underline. Decorations paint across descendant text, so a child cannot erase a parent line with none.

CSS Syntax

Omitted parts reset to their initial values. Prefer a longhand when you only want to change one piece.

Property Values

How to Use text-decoration

Pick the line first, then add style or color only when you need them.

1. Set a line keyword such as underline, overline, line-through, or none.
2. Optionally add a style (solid, wavy, dashed) and a color.
3. Use longhands when you must keep thickness or color while toggling only the line.
4. Tune underline placement with text-underline-offset when needed.

Live Preview

Same sentence. Change only text-decoration.

CSS Examples

Each snippet focuses on text-decoration. Use Try It Yourself for a live editor.

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

<p>Sample text decoration</p>

<style>
  a {
    text-decoration: none;
  }
</style>

<a href="#">Plain link</a>

<style>
  p {
    text-decoration: underline wavy red;
  }
</style>

<p>Sample text decoration</p>

Key Takeaways