2nd/10_Wiki/Topic_CSS/CSS_Border_Images.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-images	CSS Border Images	Frontend	draft	conceptual		border-image border-image-source border-image-slice border-image-repeat CSS image border nine-slice border		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools border-image borders	https://www.w3schools.com/css/css3_border_images.asp

CSS Border Images

🎯 한 줄 통찰 (One-line insight)

The border-image property lets you use an image as the border around an element instead of a normal border, slicing the image into nine sections so corners stay fixed while the sides repeat, round, or stretch. [S1]

🧠 핵심 개념 (Core concepts)

• border-image — defines an image to be used as the border around an element, instead of the normal border. [S1]
• Nine-slice model — the image is sliced into nine sections (like a tic-tac-toe board); corners are placed at the corners, and the middle sections are repeated or stretched. [S1]
• border prerequisite — for border-image to work, the element also needs the border property set. [S1]
• Shorthand — border-image is shorthand for border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. [S1]
• Repeat behaviors — sides can be repeated, rounded, or stretched. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Slice-and-place pattern — slice once, then corners pin while edges tile/stretch to fill any border length. [S1]
• Transparent base border pattern — examples set a transparent border (e.g., 10px solid transparent) so the image border fills space the regular border reserves. [S1]
• Slice-value pattern — the slice value (a unitless number or a percentage like 20%/30%) controls how much of the image becomes corners vs. edges. [S1]

📖 세부 내용 (Details)

CSS border-image Property The border-image property allows you to define an image to be used as the border around an element, instead of the normal border. The image is sliced into nine sections (like a tic-tac-toe board), with the corners placed at the corners and the middle sections repeated or stretched. [S1]

Note: For border-image to work, the element also needs the border property set! [S1]

The border-image property is a shorthand for the following: [S1]

• border-image-source — defines the path to the image. [S1]
• border-image-slice — defines how to slice the image. [S1]
• border-image-width — defines the width of the image. [S1]
• border-image-outset — defines the amount by which the border image area extends beyond the border box. [S1]
• border-image-repeat — defines whether the image is repeated, rounded, or stretched. [S1]

Example — image border with round: [S1]

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Example — image border with stretch: [S1]

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Example — different slice values across multiple elements: [S1]

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

CSS Border Image Properties

Property	Description
border-image	Shorthand for all the border-image-* properties
border-image-source	Specifies the path to the image used as a border
border-image-slice	Specifies how to slice the border image
border-image-width	Specifies the widths of the border image
border-image-outset	Specifies the amount by which the border image area extends beyond the border box
border-image-repeat	Specifies whether the border image should be repeated, rounded, or stretched

[S1]

🛠️ 적용 사례 (Applied in summary)

The page's own examples are the applied cases: a single image border with round and with stretch, plus three elements using different slice values (50, 20%, 30%). No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Basic image border (language: CSS) — note the required transparent border:

selector {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Stretched variant:

selector {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

⚖️ 모순 및 업데이트 (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 Rounded Corners, CSS Multiple Backgrounds, CSS Background Size
• 참조 맥락: Referenced when an element needs a decorative or themed border that a solid color cannot provide.

📚 출처 (Sources)

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

📝 변경 이력 (Change history)

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