What are the text decoration styles css: Exploring the various text decoration styles in CSS for better designEvelyn MoonSep 05, 2025Table of ContentsTips 1:FAQTable of ContentsTips 1FAQFree Smart Home PlannerAI-Powered smart home design software 2025Home Design for FreeText decoration styles in CSS control how decorative lines (such as underlines, overlines, or strikethroughs) appear on your text content. The most common property is text-decoration, which is a shorthand for several related properties:text-decoration-line: Specifies what kind of line will be added (underline, overline, line-through).text-decoration-style: Sets the style of the line (solid, double, dotted, dashed, wavy).text-decoration-color: Sets the color of the decorative line.text-decoration-thickness: Specifies the thickness of the decoration line (newer browsers).Here are some examples of how you can use these properties:/* Underlined with wavy, red line */p.special { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red;}/* Strikethrough with double, blue line */span.removed { text-decoration-line: line-through; text-decoration-style: double; text-decoration-color: blue;}Modern CSS also provides the text-decoration shorthand for more concise syntax:/* Underlined, dashed, green, 2px thick */a.custom-link { text-decoration: underline dashed green 2px;}As a designer, I often use these styles not only for functional reasons (like showing links or edits), but also to enhance a room’s digital moodboard—choosing a wavy underline to give a relaxed vibe or a double line for more formality. Just like when laying out a home designer plan, layering details in text decorations can subtly shift the way users perceive the overall design.Tips 1:Balance decorative text effects with readability. Overusing styles like wavy or double lines can clutter your design. Use them purposefully—perhaps to highlight key navigation or call attention to unique interface elements, just like selecting accent pieces in interior design.FAQQ: What values can I use for text-decoration-line?A: You can use underline, overline, line-through, or combinations (like underline overline).Q: Are all text-decoration-style values supported in all browsers?A: Most modern browsers support solid, double, dotted, dashed, and wavy. Older browsers may have limited support.Q: How do you change the underline color without affecting the text color?A: Use text-decoration-color to set the color of the underline independently from the text.Q: Can I adjust the thickness of the decoration line?A: Yes; use text-decoration-thickness in modern browsers to set the line’s thickness (e.g., 2px).Q: Is text-decoration a shorthand property?A: Yes; text-decoration combines line, style, color, and thickness into a single declaration.Home Design for FreePlease check with customer service before testing new feature.