CSS text-decoration Property

Description

The text-decoration property is the CSS shorthand used to control decorative markings applied to text — lines and related strokes that augment glyphs to convey emphasis, semantics or visual style. These decorations are visual painting instructions layered with the text (rather than changes to box geometry), so they typically do not alter layout or the flow of surrounding content. Authors use this property to express things like emphasis, links or typographic ornamentation while keeping the underlying document structure and line boxes unchanged.

Under the hood the shorthand controls several more specific longhand properties that determine what gets painted and how: text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness. There are also related controls such as text-decoration-skip-ink that influence whether decorations avoid intersecting glyph ink. Because it is a shorthand, using it will set those component properties together; many authors prefer the longhand properties when they need fine-grained typographic control.

Rendering of text decorations takes into account line fragmentation, inheritance and compositing rules. Decorations can span inline boxes and are carried across element boundaries in many cases so that a continuous underline or strike-through can appear even when the marked-up text is split across elements or lines. Decorations are drawn relative to the glyph metrics and can interact with the element’s text color and shadows — for example, decoration color often relates to the element’s color unless explicitly specified — and their visual placement can be adjusted in conjunction with typographic controls like text-underline-position. Because decorations are visual only, they generally don’t affect hit-testing or layout, but they are important for accessibility and visual affordances, so consider their appearance across interactive states and when combining with effects such as text-shadow.

Definition

Initial value: none
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.textDecoration

Interactive Demo

text-decoration: underline;

text-decoration: underline dashed;

text-decoration: underline dashed blue;

text-decoration: wavy underline red;

text-decoration: underline overline green 4px;

The rusty swing set creaked.

Syntax

text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color>

Values

<text-decoration-line>See the text-decoration-line CSS property for values.
<text-decoration-style>See the text-decoration-style CSS property for values.
<text-decoration-color>See the text-decoration-color CSS property for values.

Example

HTML

<div class="demo">

  <h1>text-decoration examples</h1>

  <p class="default">Default link: <a href="#">Example link</a></p>

  <p class="underline">Underline: <span>Underlined text</span></p>

  <p class="overline">Overline: <span>Overlined text</span></p>

  <p class="line-through">Line-through: <span>Struck-through text</span></p>

  <p class="none">No decoration: <span>No decoration</span></p>

  <p class="double">Double, colored, thick: <span>Double underline</span></p>

  <p class="wavy">Wavy: <span>Wavy underline</span></p>

  <p class="dotted">Dotted: <span>Dotted underline</span></p>

  <p class="dashed">Dashed: <span>Dashed underline</span></p>

  <p class="combined">Combined lines: <span>Underline + overline</span></p>

</div>

CSS

/* Container */
.demo {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 24px;
  max-width: 680px;
  margin: 40px auto;
  line-height: 1.6;
  color: #222;
}

h1 {
  font-size: 20px;
  margin-bottom: 12px;
}

.demo p {
  margin: 10px 0;
}

/* Default link */
.default a {
  color: #1e90ff;
  text-decoration: underline;
}

/* Simple underline (shorthand) */
.underline span {
  text-decoration: underline;
}

/* Overline using longhand */
.overline span {
  text-decoration-line: overline;
  text-decoration-color: #16a085;
}

/* Line-through */
.line-through span {
  text-decoration-line: line-through;
  color: #555;
}

/* No decoration */
.none span {
  text-decoration: none;
}

/* Double underline with color and thickness (shorthand + thickness) */
.double span {
  text-decoration: underline double #8e44ad;
  text-decoration-thickness: 4px;
}

/* Wavy underline */
.wavy span {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #e67e22;
}

/* Dotted and dashed examples */
.dotted span {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #2ecc71;
}

.dashed span {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #e74c3c;
}

/* Multiple lines and longhand properties */
.combined span {
  text-decoration-line: underline overline;
  text-decoration-color: #34495e;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-decoration property. Hover over a browser icon to see the version that first introduced support for this CSS property.