Tag text-decoration-style

🎨 CSS text-decoration-style — Styling the Look of Text Lines

The text-decoration-style property defines the appearance of text decoration lines, such as underlinesoverlines, 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

ValueVisual ResultDescription
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 underline
  • double underline
  • dotted underline
  • dashed underline
  • wavy 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 CaseRecommended Style
Formal links or headerssolid or double
Error or warning textwavy or dashed
Editorial or notesdotted
Buttons or emphasisdashed or double

🧠 Browser Support

  • ✅ Supported in all modern browsers (Chrome, Firefox, Edge, Safari)
  • ⚠️ Some older browsers (especially IE) may ignore anything beyond solid

✅ Summary

Propertytext-decoration-style
PurposeControls how decoration lines look
Common valuessoliddotteddasheddoublewavy
Use withtext-decoration-linecolorthickness
Best forStyling 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.