border-image-repeat 속성

border-image-repeat 속성은 이미지로 된 테두리의 내부 부분 반복 방식을 지정합니다. 더 자세한 정보는 border-image 속성을 참조하세요.

구문

선택자 {
	border-image-repeat: stretch | repeat | round;
}

값

값	설명
`stretch`	테두리 이미지를 요소의 크기까지 늘입니다. 이 값이 기본값입니다.
`repeat`	테두리 이미지를 반복합니다.
`round`	이미지를 반복하고, 요소의 각 변에 정수 개의 이미지가 오도록 크기를 조정합니다.

기본값: stretch.

매개변수 개수

1개 또는 2개의 매개변수를 사용할 수 있습니다. 두 개의 매개변수가 주어지면, 첫 번째는 위쪽과 아래쪽 테두리에 적용되고, 두 번째 매개변수는 왼쪽과 오른쪽 테두리에 적용됩니다.

예시 . stretch 값

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

예시 . repeat 값

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

예시 . round 값

현재 일반 상태에는 repeat 값이 설정되어 있고, 마우스 오버 시에는 round가 설정되어 있습니다. 마우스 오버 전에는 테두리에 마름모의 정수 개수가 들어가지 않지만, 마우스 오버 후에는 정수 개수가 들어갑니다. 이것이 round의 동작 방식입니다:

<div id="elem"></div>

#elem:hover {
	border-image-repeat: round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

예시 . 두 개의 값

너비에는 repeat 값, 높이에는 stretch 값:

<div id="elem"></div>

#elem {
	border-image-repeat: repeat stretch;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

같이 보기

border-image 속성,
테두리 이미지를 위한 단축 속성
border-image-source 속성,
테두리 이미지의 경로를 지정하는 속성
border-image-slice 속성,
테두리 이미지의 분할을 지정하는 속성
border-image-width 속성,
테두리 이미지의 크기를 지정하는 속성
border-image-outset 속성,
테두리 이미지의 오프셋을 지정하는 속성