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을 참고하세요.

형식 구문

예제

비트맵

이번 예제는 요소의 테두리에 마름모 패턴을 적용합니다. 테두리 이미지의 원본은 가로 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.
상속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

같이 보기