border-image-repeat

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

형식 구문

[ stretch | repeat | round | space ]{1,2}

예제

CSS

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

명세

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image-repeat' in that specification.
Candidate Recommendation Initial definition
초기값stretch
적용대상all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
상속no
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-image-repeatChrome Full support 15Edge Full support 12Firefox Full support 15IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 15Opera Android ? Safari iOS Full support 9.3Samsung Internet Android ?
roundChrome Full support 30Edge Full support 12Firefox Full support 15IE Full support 11Opera Full support 17Safari Full support 9.1WebView Android Full support ≤37Chrome Android Full support 30Firefox Android Full support 15Opera Android ? Safari iOS Full support 9.3Samsung Internet Android ?
spaceChrome Full support 56Edge Full support 12Firefox Full support 50IE Full support 11Opera Full support 43Safari Full support 9.1WebView Android Full support 56Chrome Android Full support 56Firefox Android Full support 50Opera Android ? Safari iOS Full support 9.3Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown