2nd/10_Wiki/Dev/Topic_CSS/CSS_Border_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-border-style	CSS Border Style	Frontend	draft	conceptual		border-style CSS border style border types dotted border solid border		B	0.9	2026-06-23	2026-06-23			css web frontend w3schools border border-style	https://www.w3schools.com/css/css_border.asp

CSS Border Style

🎯 한 줄 통찰 (One-line insight)

The border-style property specifies what kind of border to display and is the gatekeeper of all border styling — none of the other border properties (width, color) have any effect unless border-style is set. [S1]

🧠 핵심 개념 (Core concepts)

• CSS border properties allow you to specify the style, width, and color of an element's border. [S1]
• border-style specifies what kind of border to display. [S1]
• border-style is required — none of the other CSS border properties will have any effect unless border-style is set. [S1]
• Per-side values — the border-style property can take from one to four values, applied to the top, right, bottom, and left borders respectively. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Style-first rule — always declare border-style before width/color; the others are inert without it. [S1]
• One-to-four value shorthand — a single border-style declaration can style all four sides at once (e.g. dotted dashed solid double). [S1]

📖 세부 내용 (Details)

Border Style [S1] The border-style property specifies what kind of border to display.

The following values are allowed: [S1]

Value	Meaning
dotted	Defines a dotted border
dashed	Defines a dashed border
solid	Defines a solid border
double	Defines a double border
groove	Defines a 3D grooved border (effect depends on the border-color value)
ridge	Defines a 3D ridged border (effect depends on the border-color value)
inset	Defines a 3D inset border (effect depends on the border-color value)
outset	Defines a 3D outset border (effect depends on the border-color value)
none	Defines no border
hidden	Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border). [S1]

Example — demonstrating all of the border-style values, including a mix class that supplies four values: [S1]

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set! [S1]

🛠️ 적용 사례 (Applied in summary)

The example stylesheet above is the page's own applied example: a set of paragraph classes each demonstrating one border-style value, plus a mix class applying four values at once. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Single value applied to all four sides (language: CSS):

p.solid {border-style: solid;}

Four values, one per side (top, right, bottom, left):

p.mix {border-style: dotted dashed solid double;}

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Border Width, CSS Border Color, CSS Border Sides, CSS Border Shorthand
• 참조 맥락: The mandatory first step for any element border; referenced whenever width or color is applied.

📚 출처 (Sources)

• [S1] W3Schools — CSS Border Style — https://www.w3schools.com/css/css_border.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Border Style" page (Astra wiki-curation, P-Reinforce v3.1 format).