text-decoration-style

by

text-decoration-style controls the style of text decorations (underline, overline, line-through).

Syntax

text-decoration-style: solid | double | dotted | dashed | wavy;

Values

  • solid: Default value. Creates a single, solid line.
  • double: Creates two parallel lines.
  • dotted: Creates a series of dots.
  • dashed: Creates a series of dashes.
  • wavy: Creates a wavy line.

Usage

  • Apply the text-decoration-style property to any HTML element that supports text decorations (e.g., <p>, <span>, <h>, etc.).
  • Combine it with the text-decoration property to specify the type of decoration (underline, overline, line-through).

Example

<p>This text has a solid underline.</p>
<p>This text has a double overline.</p>
<p>This text has a dotted line-through.</p>
<p>This text has a dashed underline.</p>
<p>This text has a wavy overline.</p>
p {
  text-decoration: underline; /* or overline, line-through */
  text-decoration-style: solid; /* or double, dotted, dashed, wavy */
}

Additional Notes

  • You can combine multiple text decorations on the same element using the text-decoration property with multiple values separated by spaces.
  • The text-decoration-style property is not supported in older browsers. For compatibility, consider using a CSS preprocessor or a polyfill.

Example

<p>This text has a solid underline and a dotted line-through.</p>
p {
  text-decoration: underline line-through;
  text-decoration-style: solid dotted;
}