border-image-repeat
CSS 속성은 원본 이미지의 모서리 영역을 요소의 테두리 이미지 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
구문
/* 키워드 값 */
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
- 원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.
형식 구문
예제
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; /* 라이브 샘플에서 바꿀 수 있습니다 */
}
HTML
<div id="bordered">저한테 다양한 테두리 반복 속성을 써보세요!</div>
<select id="repetition">
<option value="stretch">stretch</option>
<option value="repeat">repeat</option>
<option value="round">round</option>
<option value="space">space</option>
<option value="stretch repeat">stretch repeat</option>
<option value="space round">space round</option>
</select>
JavaScript
var repetition = document.getElementById("repetition");
repetition.addEventListener("change", function (evt) {
document.getElementById("bordered").style.borderImageRepeat = evt.target.value;
});
명세
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 |
Computed value | as specified |
Animation type | discrete |
브라우저 호환성
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.