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.
시도해보기
구문
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
속성은 한 개 또는 두 개의 값을 사용해 지정할 수 있습니다.
- 한 개의 값을 지정하면 모든 네 면이 같은 방식을 사용합니다.
- 두 개의 값을 지정하면, 첫 번째 값은 위와 아래, 두 번째 값은 왼쪽과 오른쪽 면의 방식을 지정합니다.
값
형식 구문
예제
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 |
브라우저 호환성
BCD tables only load in the browser