text-decoration-style

Overview

The text-decoration-style property defines the style of the decoration lines that are set by the text-decoration-line property on an element. It's a component of the text-decoration shorthand, which also includes text-decoration-line, text-decoration-color, and text-decoration-thickness.

Examples and Usage

Let's experiment with the text-decoration-style values to modify the decoration lines on <strong> elements nested within paragraphs that have the same content.

HTML Structure

<p class="solid-style">Learn how to code for the web by understanding three core subjects: <strong>HTML, CSS, & JavaScript.</strong>
</p>

<p class="double-style">Learn how to code for the web by understanding three core subjects: <strong>HTML, CSS, and JavaScript.</strong>
</p>

<p class="dotted-style">Learn how to code for the web by understanding three core subjects: <strong>HTML, CSS, and JavaScript.</strong>
</p>

<p class="dashed-style">Learn how to code for the web by understanding three core subjects: <strong>HTML, CSS, and JavaScript.</strong>
</p>

<p class="wavy-style">Learn how to code for the web by understanding three core subjects: <strong>HTML, CSS, and JavaScript.</strong></p>

CSS Styling

.solid-style > strong {
  text-decoration-line: underline; /* underline as decoration line */
  text-decoration-style: solid; /* style of decoration line is solid */
}

.double-style > strong {
  text-decoration-line: underline; /* underline as decoration line */
  text-decoration-style: double; /* style of decoration line is double */
}

.dotted-style > strong {
  text-decoration-line: underline; /* underline as decoration line */
  text-decoration-style: dotted; /* style of decoration line is dotted */
}

.dashed-style > strong {
  text-decoration-line: underline; /* underline as decoration line */
  text-decoration-style: dashed; /* style of decoration line is dashed */
}

.wavy-style > strong {
  text-decoration-line: underline overline; /* underline and overline as decoration lines */
  text-decoration-style: wavy; /* style of decoration lines is wavy */
  text-decoration-color: orange; /* color of decoration lines is orange */
}

It's noteworthy that in the .wavy-style class, we've applied both underline and overline decoration lines. In such scenarios, using the text-decoration shorthand is advised.

Values

The text-decoration-style property accepts the following values:

Associated Properties

• text-decoration-line
• text-decoration-color
• text-decoration-thickness
• text-emphasis
• text-emphasis-color
• text-emphasis-style
• text-emphasis-position

Tips and Tricks

• The initial value of the text-decoration-style property is solid.

• The text-decoration-style property is not inherited from parent elements.

• The text-decoration shorthand can help you write more concise and clean code, especially when multiple values for text-decoration-line are specified.

• Note that all decorations originating from a single element must maintain a uniform style, even if descendant elements specify different styles. This ensures visual consistency.

Browser Compatibility

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

text-decoration Shorthand

Safari versions (8-16.3), (16.4), and (16-TP), require vendor prefixes for proper functioning. For more details, refer to the first link in the Useful Resources below.

text-decoration-style: wavy

Useful Resources

Can I use: text-decoration shorthand

Can I use: text-decoration-style: wavy

W3C's Editor's Draft of CSS Text Decoration Module Level 3: text-decoration-style