🎨 CSS text-decoration-style
— Styling the Look of Text Lines
The text-decoration-style
property defines the appearance of text decoration lines, such as underlines, overlines, or line-throughs.
It works in combination with:
text-decoration-line
(to define the type of line)text-decoration-color
(to style the line color)text-decoration-thickness
(to control line thickness)
🔹 What Does text-decoration-style
Do?
It changes the visual style of the line applied to text, giving you more expressive and creative typography.
📘 Syntax
selector {
text-decoration-style: solid | double | dotted | dashed | wavy;
}
💡 Values Explained
Value | Visual Result | Description |
---|---|---|
solid | ─── | Default. A single, clean line. |
double | ══ | Two solid lines, like double underline. |
dotted | ····· | Dotted decoration line. |
dashed | – – – – | Dashed line, spaced like a broken underline. |
wavy | ~~~~~ | Wavy or squiggly line, great for attention-getters. |
✍️ Example: Underlined Text with Wavy Style
htmlКопироватьРедактировать<p class="wavy-underline">This is a wavy underline!</p>
.wavy-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: teal;
}
✅ This gives your text a wavy teal underline, perfect for playful or warning messages.
🖼️ Image Idea: Visual Styles of text-decoration-style
Image Description:
A single sentence repeated with:
solid
underlinedouble
underlinedotted
underlinedashed
underlinewavy
underline
🎯 Purpose: Helps designers quickly visualize how each style looks.
💡 Combine with Other Decoration Properties
You can combine styles for unique effects:
.alert-text {
text-decoration-line: underline overline;
text-decoration-style: dashed;
text-decoration-color: crimson;
text-decoration-thickness: 2px;
}
✅ This creates a double crimson dashed line above and below the text!
✅ Best Use Cases
Use Case | Recommended Style |
---|---|
Formal links or headers | solid or double |
Error or warning text | wavy or dashed |
Editorial or notes | dotted |
Buttons or emphasis | dashed or double |
🧠 Browser Support
- ✅ Supported in all modern browsers (Chrome, Firefox, Edge, Safari)
- ⚠️ Some older browsers (especially IE) may ignore anything beyond
solid
✅ Summary
Property | text-decoration-style |
---|---|
Purpose | Controls how decoration lines look |
Common values | solid , dotted , dashed , double , wavy |
Use with | text-decoration-line , color , thickness |
Best for | Styling links, warnings, buttons, headings |
🔚 Final Thought
CSS text-decoration-style
is a simple but powerful way to enhance readability and expressiveness in text. Whether you’re designing formal documents or playful UI, you can add personality with just a line.