border-image
============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
**`border-image`** CSS 속성은 요소의 주위에 이미지를 그립니다. 일반 테두리를 대체합니다.

시도해보기
-----

`border-image`는 `border-image-source`, `border-image-slice`, `border-image-width`, `border-image-outset`, `border-image-repeat`의 단축 속성입니다. 다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정됩니다.

**참고:** 테두리 이미지를 불러오는데 실패할 경우에 대비해 `border-style` 속성을 설정해야 합니다. 사실 명세에 따르면 필수로 지정해야 하지만 모든 브라우저가 그렇게 구현하지는 않았습니다.

구문
--


```css
/\* 이미지 | 슬라이스 \*/
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;
```


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

**참고:** 만약 `border-image-source`의 계산값이 `none`이거나 이미지를 그릴 수 없다면 `border-style`이 대신 보여집니다.

### 값

`<'border-image-source'>`

원본 이미지. `border-image-source`를 참고하세요.

`<'border-image-slice'>`

이미지를 구역별로 나눌 때 사용할 슬라이스 크기. 네 개 값까지 지정할 수 있습니다. `border-image-slice`를 참고하세요.

`<'border-image-width'>`

테두리 이미지 너비. 네 개 값까지 지정할 수 있습니다. `border-image-width`를 참고하세요.

`<'border-image-outset'>`

테두리 이미지와 요소 외곽의 거리. 네 개 값까지 지정할 수 있습니다. `border-image-outset`을 참고하세요.

`<'border-image-repeat'>`

원본 이미지의 모서리 구역을 테두리의 크기에 맞출 때의 조정 방법. 두 개 값까지 지정할 수 있습니다. `border-image-repeat`을 참고하세요.

### 형식 구문
```

border-image =   
  <'border-image-source'>                             ||  
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||  
  <'border-image-repeat'>                               
  
```

예제
--

### 비트맵

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

![an example borderimage](/ko/docs/Web/CSS/border-image/border.png)

#### HTML


```html
<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>
```


#### CSS

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


```css
#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}
```


#### 결과

### 그레이디언트

#### HTML


```html
<div id="gradient">그레이디언트 기반 테두리 이미지에 둘러 쌓인 요소에요!</div>
```


#### CSS


```css
#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}
```


#### 결과

접근성 고려사항
--------

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

* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image |

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-image-source`: `none`
* `border-image-slice`: `100%`
* `border-image-width`: `1`
* `border-image-outset`: `0`
* `border-image-repeat`: `stretch`
 |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | as each of the properties of the shorthand:* `border-image-slice`: refer to the size of the border image
* `border-image-width`: refer to the width or height of the border image area
 |
| 계산 값 | as each of the properties of the shorthand:* `border-image-outset`: as specified, but with relative lengths converted into absolute lengths
* `border-image-repeat`: as specified
* `border-image-slice`: one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
* `border-image-source`: `none` or the image with its URI made absolute
* `border-image-width`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `border-image-outset`: by computed value type
* `border-image-repeat`: discrete
* `border-image-slice`: by computed value type
* `border-image-source`: discrete
* `border-image-width`: by computed value type
 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `border`
* `outline`
* `box-shadow` (en-US)
* `background-image`
* `url()` 함수
* 그레이디언트 함수: `conic-gradient()` (en-US), `linear-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-radial-gradient()` (en-US)