Files

T

koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-23 19:21:18 +09:00

3.4 KiB

Raw Blame History

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

title

CSS Rounded Borders

🎯 한 줄 통찰 (One-line insight)

The border-radius property is used to add rounded corners to an element, with larger radius values producing rounder corners. [S1]

🧠 핵심 개념 (Core concepts)

border-radius is used to add rounded borders to an element. [S1]
Visual progression — the page demonstrates corners ranging from a normal (square) border through increasingly rounded variants ("Normal border", "Round border", "Rounder border", "Roundest border"). [S1]
Combined with a border — rounded corners are shown applied on top of a defined border (e.g. 2px solid red). [S1]

🧩 추출된 패턴 (Extracted patterns)

Border-plus-radius — pair a border declaration with a border-radius value to round the corners of a bordered element. [S1]
Radius magnitude controls roundness — increasing the radius value increases the visible corner curvature. [S1]

📖 세부 내용 (Details)

CSS Rounded Borders [S1] The border-radius property is used to add rounded borders to an element.

Example — a paragraph with a solid red border and rounded corners: [S1]

p {
  border: 2px solid red;
  border-radius: 5px;
}

The page visually shows several levels of rounding labelled "Normal border", "Round border", "Rounder border", and "Roundest border". The exact CSS source for each individual labelled variation (beyond the 5px example above) was rendered as images in the page and is Not found in source. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's own applied example is the single paragraph rule above, combining a 2px solid red border with a 5px border-radius. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Rounded border on a bordered element (language: CSS):

p {
  border: 2px solid red;
  border-radius: 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.86
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: CSS Tutorial
관련 개념: CSS Border Shorthand, CSS Border Style, CSS Border Width, CSS Border Color
참조 맥락: Applied on top of a defined border to soften an element's corners.

📚 출처 (Sources)

[S1] W3Schools — CSS Rounded Borders — https://www.w3schools.com/css/css_border_rounded.asp

📝 변경 이력 (Change history)

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

3.4 KiB Raw Blame History