YouTip

## CSS text-decoration-style Property The `text-decoration-style` CSS property sets the style of the lines specified by `text-decoration-line` (such as underlines, overlines, or line-throughs). This allows you to customize the appearance of text decorations beyond the standard solid line, adding visual flair or semantic meaning to your typography. --- ## Quick Example The following example demonstrates how to apply different line styles to text decorations: ```css /* Solid underline (default) */ div.a { text-decoration-line: underline; text-decoration-style: solid; } /* Wavy underline (often used for spelling errors) */ div.b { text-decoration-line: underline; text-decoration-style: wavy; } /* Double underline */ div.c { text-decoration-line: underline; text-decoration-style: double; } /* Wavy overline and underline combined */ div.d { text-decoration-line: overline underline; text-decoration-style: wavy; } ``` --- ## Browser Support The numbers in the table specify the first browser version that fully supports the property. | Property | Chrome | Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | `text-decoration-style` | 57.0 | 79.0 | 36.0
(6.0 `-moz-`) | 12.1 | 44.0 | --- ## Definition and Usage The `text-decoration-style` property defines the visual style of the decoration line (e.g., solid, wavy, dashed). * **Note:** This property only has a visible effect if a decoration line has been established using `text-decoration-line` (or the `text-decoration` shorthand). ### Property Specifications | Feature | Description | | :--- | :--- | | **Default Value:** | `solid` | | **Inherited:** | No | | **Animatable:** | No (See (css-animatable.html)) | | **CSS Version:** | CSS3 | | **JavaScript Syntax:** | `object.style.textDecorationStyle = "wavy"` | --- ## CSS Syntax ```css text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit; ``` --- ## Property Values | Value | Description | | :--- | :--- | | `solid` | **Default**. The decoration is rendered as a single solid line. | | `double` | The decoration is rendered as a double line. | | `dotted` | The decoration is rendered as a dotted line. | | `dashed` | The decoration is rendered as a dashed line. | | `wavy` | The decoration is rendered as a wavy (squiggly) line. | | `initial` | Sets this property to its default value (`solid`). | | `inherit` | Inherits this property from its parent element. | --- ## Practical Implementation Examples ### 1. Creating a "Spelling Error" Style A common use case for the `wavy` style is to mimic spell-checker indicators. ```html

This sentence contains a mispeled word.

``` ```css .misspelled { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } ``` ### 2. Using the Shorthand Property Instead of writing out separate properties, you can combine line, style, and color using the `text-decoration` shorthand property: ```css /* Syntax: text-decoration: */ .important-link { text-decoration: underline double #ff0000; } ``` --- ## Considerations & Best Practices 1. **Pairing Requirement:** Remember that `text-decoration-style` does nothing on its own. It must be paired with `text-decoration-line` (e.g., `underline`, `line-through`) to be visible. 2. **Accessibility:** Avoid using text decoration styles as the *only* way to convey meaning. For example, if a wavy red underline indicates an error, ensure screen readers or other text cues also convey that an error exists. 3. **Readability:** Highly stylized lines like `wavy` or `dotted` can reduce text readability if used excessively. Limit their use to specific elements like links, abbreviations, or inline errors.