---
id: css-text-decoration-styles
title: "CSS Text Decoration Styles"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["text-decoration-style", "text-decoration-thickness", "text-decoration shorthand", "wavy underline", "decoration line style"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "text", "decoration"]
raw_sources: ["https://www.w3schools.com/css/css_text_decoration_styles.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Text Decoration Styles]]

## 🎯 한 줄 통찰 (One-line insight)
`text-decoration-style` sets the line style (solid/double/dotted/dashed/wavy), `text-decoration-thickness` sets its thickness, and the `text-decoration` shorthand combines line, color, style, and thickness in one declaration. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`text-decoration-style` values** — `solid` (default, single line), `double` (double line), `dotted` (dotted line), `dashed` (dashed line), `wavy` (wavy line). [S1]
- **`text-decoration-thickness` values** — `auto`, pixel measurements (e.g., `5px`), and percentages (e.g., `25%`). [S1]
- **Shorthand order** — `text-decoration` combines `text-decoration-line` (required), `text-decoration-color` (optional), `text-decoration-style` (optional), `text-decoration-thickness` (optional). [S1]
- **Links underlined by default** — all links in HTML are underlined by default; `text-decoration: none;` removes the underline. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Styled-line pattern** — pair `text-decoration-line: underline;` with a `text-decoration-style` value to vary the line. [S1]
- **Thickness control pattern** — add `text-decoration-thickness` (auto/px/%) to control line weight. [S1]
- **Full shorthand pattern** — progressively combine line, color, style, and thickness in a single `text-decoration` declaration. [S1]
- **Link-cleanup pattern** — `a { text-decoration: none; }` to remove default link underlines. [S1]

## 📖 세부 내용 (Details)
**Specify a Style for the Decoration Line** — the `text-decoration-style` property sets the decoration line style with these values: "solid - Default value. Single line", "double - Double line", "dotted - Dotted line", "dashed - Dashed line", "wavy - Wavy line". [S1]

Example 1 — text-decoration-style: [S1]
```css
h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
```

**Specify the Thickness for the Decoration Line** — the `text-decoration-thickness` property controls decoration line thickness, accepting values like `auto`, pixel measurements (e.g., `5px`), and percentages (e.g., `25%`). [S1]

Example 2 — text-decoration-thickness: [S1]
```css
h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}
```

**The Shorthand Property** — the `text-decoration` property combines `text-decoration-line` (required), `text-decoration-color` (optional), `text-decoration-style` (optional), and `text-decoration-thickness` (optional). [S1]

Example 3 — text-decoration shorthand: [S1]
```css
h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}
```

**A Small Tip on Links** — "All links in HTML are underlined by default"; use `text-decoration: none;` to remove underlines from links. [S1]

Example 4 — remove link underlines: [S1]
```css
a {
  text-decoration: none;
}
```

## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: per-element decoration styles (solid/double/dotted/dashed/wavy), thickness control (auto/px/%), progressive shorthand declarations, and removing link underlines. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Shorthand pattern (language: CSS):
```css
selector {
  text-decoration: <line> <color> <style> <thickness>;
}
```
Concrete example:
```css
p {
  text-decoration: underline red double 5px;
}
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Text Decoration]], [[CSS Text Color]], [[CSS Links]]
- **참조 맥락:** Referenced when styling decoration line appearance/thickness or using the text-decoration shorthand and removing link underlines.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Text Decoration Styles — https://www.w3schools.com/css/css_text_decoration_styles.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Text Decoration Styles" page (Astra wiki-curation, P-Reinforce v3.1 format).
