---
title: border-image
slug: Web/CSS/border-image
tags:
  - CSS
  - CSS Borders
  - CSS Property
  - Reference
translation_of: Web/CSS/border-image
---
<div>{{CSSRef}}</div>

<p><strong><code>border-image</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 주위에 이미지를 그립니다. 일반 <a href="/ko/docs/Web/CSS/border">테두리</a>를 대체합니다.</p>

<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div>



<p><code>border-image</code>는 {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 다른 단축 속성과 마찬가지로, 생략한 속성은 <a href="/ko/docs/Web/CSS/initial_value">초기값</a>으로 설정됩니다.</p>

<div class="note">
<p><strong>참고:</strong> 테두리 이미지를 불러오는데 실패할 경우에 대비해 {{cssxref("border-style")}} 속성을 설정해야 합니다. 사실 명세에 따르면 필수로 지정해야 하지만 모든 브라우저가 그렇게 구현하지는 않았습니다.</p>
</div>

<h2 id="구문">구문</h2>

<pre class="brush: css no-line-numbers">/* 이미지 | 슬라이스 */
border-image: linear-gradient(red, blue) 27;

/* 이미지 | 슬라이스 | 반복 */
border-image: url("/images/border.png") 27 space;

/* 이미지 | 슬라이스 | 너비 */
border-image: linear-gradient(red, blue) 27 / 35px;

/* 이미지 | 슬라이스 | 너비 | 거리 | 반복 */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
</pre>

<p><code>border-image</code> 속성은 아래 나열한 값 중 한 개에서 다섯 개 사이를 사용해 지정할 수 있습니다.</p>

<div class="note">
<p><strong>참고:</strong> 만약 {{cssxref("border-image-source")}}의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>none</code>이거나 이미지를 그릴 수 없다면 {{cssxref("border-style")}}이 대신 보여집니다.</p>
</div>

<h3 id="값">값</h3>

<dl>
 <dt><code>&lt;'border-image-source'&gt;</code></dt>
 <dd>원본 이미지. {{cssxref("border-image-source")}}를 참고하세요.</dd>
 <dt><code>&lt;'border-image-slice'&gt;</code></dt>
 <dd>이미지를 구역별로 나눌 때 사용할 슬라이스 크기. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-slice")}}를 참고하세요.</dd>
 <dt><code>&lt;'border-image-width'&gt;</code></dt>
 <dd>테두리 이미지 너비. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-width")}}를 참고하세요.</dd>
 <dt><code>&lt;'border-image-outset'&gt;</code></dt>
 <dd>테두리 이미지와 요소 외곽의 거리. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-outset")}}을 참고하세요.</dd>
 <dt><code>&lt;'border-image-repeat'&gt;</code></dt>
 <dd>원본 이미지의 모서리 구역을 테두리의 크기에 맞출 때의 조정 방법. 두 개 값까지 지정할 수 있습니다. {{cssxref("border-image-repeat")}}을 참고하세요.</dd>
</dl>

<h3 id="형식_구문">형식 구문</h3>

{{csssyntax}}

<h2 id="예제">예제</h2>

<h3 id="비트맵">비트맵</h3>

<p>이번 예제는 요소의 테두리에 마름모 패턴을 적용합니다. 테두리 이미지의 원본은 가로 81픽셀, 세로 81픽셀의 ".png" 파일로, 8개의 마름모가 사각형의 테두리를 이루고 있습니다.</p>

<p><img alt="an example borderimage" src="https://mdn.mozillademos.org/files/4127/border.png" style="height: 81px; width: 81px;"></p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div id="bitmap"&gt;This element is surrounded by a bitmap-based border image!&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<p>마름모 하나의 크기에 맞추기 위해, 81을 3으로 나눈 <code>27</code>을 슬라이스 크기로 사용하여 원본 이미지를 모서리와 테두리 구역으로 나눕니다. 테두리 이미지의 중앙을 요소 테두리의 가운데로 맞추기 위해 거리도 각 너비의 절반으로 설정합니다. 마지막으로 반복 값에 <code>round</code>를 지정해 모서리가 끊기거나 잘리지 않도록 설정합니다.</p>

<pre class="brush:css">#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image:
      url("https://mdn.mozillademos.org/files/4127/border.png")  /* 원본 이미지 */
      27 /                    /* 슬라이스 */
      36px 28px 18px 8px /    /* 너비 */
      18px 14px 9px 4px       /* 거리 */
      round;                  /* 반복 */
}
</pre>

<h4 id="결과">결과</h4>

<p>{{EmbedLiveSample('비트맵', '100%', 200)}}</p>

<h3 id="그레이디언트">그레이디언트</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;div id="gradient"&gt;그레이디언트 기반 테두리 이미지에 둘러 쌓인 요소에요!&lt;/div&gt;
</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush:css">#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}
</pre>

<h4 id="결과_2">결과</h4>

<p>{{EmbedLiveSample('그레이디언트')}}</p>

<h2 id="접근성_고려사항">접근성 고려사항</h2>

<p>보조 기술은 테두리 이미지를 읽을 수 없습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.</p>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0</a></li>
</ul>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("css.properties.border-image")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{cssxref("border")}}</li>
 <li>{{cssxref("outline")}}</li>
 <li>{{cssxref("box-shadow")}}</li>
 <li>{{cssxref("background-image")}}</li>
 <li>{{cssxref("url()")}} 함수</li>
 <li>그레이디언트 함수: {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
</ul>