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.

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

시도해 보기

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 /
  19px round;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
  fill / 30px / 30px space;

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;

border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px)
  60;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: #000;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

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'>                             

<border-image-source> = 
  none     |
  <image>  

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

<border-image-width> = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<border-image-outset> = 
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}  

<border-image-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

예제

비트맵

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

an example borderimage

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;
}

결과

접근성 고려사항

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

명세

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`.
상속	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

브라우저 호환성

같이 보기

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