CSS
🎯 CSS text-decoration-style Property
The text-decoration-style property in CSS defines how the decoration line looks.
It controls whether the line is solid, dashed, dotted, double, or wavy when applied to text.
This property is often used in links, headings, and modern UI design effects.
💬 What is text-decoration-style used for?
The text-decoration-style property helps you control the visual style of text decorations.
It is commonly used to make underlines or strikethroughs more creative and noticeable.
🔹 Basic Usage
CSS
text-decoration-style: wavy;
➡️ This makes the underline appear as a wavy line.
🧩 Values
| Value | Description |
|---|---|
| solid | Creates a solid line |
| dashed | Creates a dashed line |
| dotted | Creates a dotted line |
| double | Creates a double line |
| wavy | Creates a wavy line |
| initial | Resets to default browser value |
| inherit | Inherits value from parent element |
1. Solid Line
HTML
<p style="text-decoration: underline solid;">
Solid underline
</p>
2. Dashed Line
HTML
<p style="text-decoration: underline dashed;">
Dashed underline
</p>
3. Dotted Line
HTML
<p style="text-decoration: underline dotted;">
Dotted underline
</p>
4. Double Line
HTML
<p style="text-decoration: underline double;">
Double underline
</p>
5. Wavy Line
HTML
<p style="text-decoration: underline wavy;">
Wavy underline
</p>
🔍 Quick Summary
- text-decoration-style controls the style of decoration lines
- Works together with text-decoration-line and text-decoration-color
- Common styles: solid, dashed, dotted, double, wavy
-
🧠 Summary
- The text-decoration-style property defines the visual style of text decoration lines.
- It is used to make text decorations more modern, creative, and visually appealing.
- It is often combined with underline, overline, or line-through effects in UI design.