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 AndroidEdge MobileFirefox 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 ? Chrome Android ? Edge Mobile Full support YesFirefox 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 ? Safari Full support 9.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 15Opera Android ? Safari iOS ? Samsung Internet Android ?
spaceChrome Full support 56Edge Full support 12Firefox Full support 50IE Full support 11Opera No support NoSafari Full support 9.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 50Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, alattalatta
최종 변경자: mdnwebdocs-bot,