border-image-repeat

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-repeat CSS 속성은 원본 이미지의 모서리 영역을 요소의 테두리 이미지 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.

시도해보기

구문

css
/* 키워드 값 */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* 세로방향 | 가로방향 */
border-image-repeat: round stretch;

/* 전역 값 */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;

border-image-repeat 속성은 한 개 또는 두 개의 값을 사용해 지정할 수 있습니다.

  • 한 개의 값을 지정하면 모든 네 면이 같은 방식을 사용합니다.
  • 두 개의 값을 지정하면, 첫 번째 값은 위와 아래, 두 번째 값은 왼쪽과 오른쪽 면의 방식을 지정합니다.

stretch

원본 이미지의 모서리 영역을 늘리거나 줄여 간격을 채웁니다.

repeat

원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있습니다.

round

원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 늘어나거나 줄어들 수 있습니다.

space

원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.

형식 구문

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

예제

CSS

css
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /* 라이브 샘플에서 바꿀 수 있습니다 */
}

명세

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-repeat
초기값stretch
적용대상all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
상속no
계산 값as specified
Animation typediscrete

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-image-repeat
repeat
round
space
stretch

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support