This page was translated from English by the community. Learn more and join the MDN Web Docs community.
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 2016년 3월.
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;
<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;
}
구문
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 속성은 한 개 또는 두 개의 값을 사용해 지정할 수 있습니다.
- 한 개의 값을 지정하면 모든 네 면이 같은 방식을 사용합니다.
- 두 개의 값을 지정하면, 첫 번째 값은 위와 아래, 두 번째 값은 왼쪽과 오른쪽 면의 방식을 지정합니다.
값
형식 구문
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; /* 라이브 샘플에서 바꿀 수 있습니다 */
}
<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>
var repetition = document.getElementById("repetition");
repetition.addEventListener("change", function (evt) {
document.getElementById("bordered").style.borderImageRepeat =
evt.target.value;
});
[フレーム]
명세
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # 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 type | discrete |
브라우저 호환성
Enable JavaScript to view this browser compatibility table.