---
id: css-outline-style
title: "CSS Outline Style"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["outline-style", "CSS outline", "outline", "outline vs border", "outline-offset"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "outline", "outline-style"]
raw_sources: ["https://www.w3schools.com/css/css_outline.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Outline Style]]

## 🎯 한 줄 통찰 (One-line insight)
An outline is a line drawn around an element, outside its borders, to make it "stand out" — and it is not part of the element's dimensions, so it never affects width or height. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Definition** — an outline is "a line that is drawn around elements, OUTSIDE the borders, to make the element 'stand out.'" [S1]
- **Outside the border** — the outline is drawn outside the element's border and may overlap other content. [S1]
- **No dimension impact** — "the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline." [S1]
- **`outline-style` gates everything** — "None of the other outline properties will have ANY effect unless the `outline-style` property is set!" [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Set style first** — always declare `outline-style` before relying on `outline-color`, `outline-width`, or `outline-offset`, which have no effect without it. [S1]
- **Decorative vs. layout-neutral emphasis** — use an outline (rather than a border) to highlight an element without changing its box dimensions. [S1]

## 📖 세부 내용 (Details)
**What an outline is**
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out." The outline is drawn outside the element's border and may overlap other content. Importantly, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline. [S1]

**CSS outline properties**
The tutorial lists five outline properties: [S1]
- `outline-style` — specifies the style of the outline
- `outline-color` — specifies the color of the outline
- `outline-width` — specifies the width of the outline
- `outline-offset` — adds space between the outline and the element's edge/border
- `outline` — a shorthand property

**`outline-style` values**
The `outline-style` property accepts ten possible values: `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`, `none`, and `hidden`. [S1]

**Demo example** — applying each style to a paragraph class: [S1]
```css
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
```

**Critical note**
"None of the other outline properties will have ANY effect unless the `outline-style` property is set!" [S1]

## 🛠️ 적용 사례 (Applied in summary)
The paragraph-class demo above is the page's own applied example, rendering each `outline-style` value. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Apply a named outline style (language: CSS):
```css
p.solid {outline-style: solid;}
```

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

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Outline** — drawn outside the border, may overlap other content, and does NOT affect the element's total width/height. [S1]
- **Border** — by contrast, the outline differs from a border in that the outline is layout-neutral (no dimension impact). Use an outline when emphasis must not change the box's footprint. [S1]

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

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Outline Width]], [[CSS Outline Color]], [[CSS Box Model]]
- **참조 맥락:** Referenced whenever an element must be visually emphasized without altering its dimensions.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Outline Style — https://www.w3schools.com/css/css_outline.asp

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