border-image

border-image CSS 속성은 요소의 주위에 이미지를 그립니다. 일반 테두리를 대체합니다.

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

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

구문

/* 이미지 | 슬라이스 */
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-source'> || (en-US) <'border-image-slice'> [ (en-US) / <'border-image-width'> | (en-US) / <'border-image-width'>? (en-US) / <'border-image-outset'> ] (en-US)? (en-US) || (en-US) <'border-image-repeat'>

예제

비트맵

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

an example borderimage

HTML

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

CSS

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

#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;                  /* 반복 */
}

결과

그레이디언트

HTML

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

CSS

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

결과

접근성 고려사항

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

명세

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image' in that specification.
Candidate Recommendation Initial definition

초기값as each of the properties of the shorthand:
적용대상all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter (en-US).
상속no
Percentagesas each of the properties of the shorthand:
Computed valueas each of the properties of the shorthand:
Animation typediscrete

브라우저 호환성

BCD tables only load in the browser

같이 보기