2nd/10_Wiki/Topic_CSS/CSS_Outline_Style.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

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

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]

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):

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).