Text-decoration property
Last updated: 2026-09-13
text-decoration Text-decoration property
The text-decoration CSS property adds decorative lines to text, most commonly underlines, overlines, and line-through. It is the shorthand for four sub-properties: text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness. By default, links (a elements) are underlined; reset styles usually remove that underline.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | all |
| Animation Type | shadow |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness> | Value | Text decoration shorthand (underline, line-through, etc.) |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-decoration | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Use text-decoration: none; to remove the default underline from links, but keep some other visual cue (such as a color change) to preserve accessibility.
Important： text-decoration no longer inherits by default in CSS3, yet the decoration of an ancestor still renders across a child's text. Use its sub-properties if you need fine-grained control.
❓ FAQ
QWhat is the difference between text-decoration and border-bottom underlines?
AThe line drawn by text-decoration hugs the text, with position and thickness controlled by the browser; border-bottom is the element's bottom border, sitting at the bottom of the whole line, where you can precisely control style, color, and distance — though it stretches with the element's full width.
QHow do I change just the underline's color or line style in CSS?
AUse the three sub-properties: text-decoration-color for color, text-decoration-style for the line type (solid, dashed, dotted, wavy), and text-decoration-thickness for width. Each can be set independently while the others stay at their defaults.
QHow can I remove the default underline from links using only CSS?
AWrite text-decoration: none on the link. After removing it, keep another visual distinction such as a color change or hover effect, otherwise users may not recognize the link and accessibility suffers.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
text-decoration-line property
Set the type of decoration line independently.
text-underline-offset property
Control the spacing between an underline and the text.
