border-image-width 속성

border-image-width 속성은 테두리의 가시 부분 너비를 제어하고, 크기를 조정합니다. 이 값이 border-width의 너비보다 크면, 테두리 이미지가 콘텐츠 아래로 침범합니다.

자세한 내용은 border-image 속성을 참조하세요.

구문

선택자 {
	border-image-width: CSS 단위 | 백분율 | 숫자 | auto;
}

값

값	설명
CSS 단위	CSS 단위로 지정된 값.
백분율	테두리가 적용된 블록의 크기에 대한 백분율 값.
숫자	`border-width`에 곱해지는 숫자 값.
`auto`	키워드. 지정된 경우, 값은 해당 `border-image-slice`와 같습니다. 적절한 크기가 없으면 `border-width` 값이 사용되며, 이 경우 이미지는 콘텐츠 아래로 침범하여 테두리 모서리 전체를 채웁니다. 더 나은 이해를 위해 예제를 참조하세요.

기본값: 1.

예제 . 숫자

요소에 마우스를 올리면 border-image-width 값을 2로 설정합니다. 이렇게 하면 테두리 크기가 26px*2 - border-width에 지정된 너비의 2배가 됩니다. 테두리는 텍스트 아래로 침범합니다(배경처럼):

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

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

예제 . border-image-repeat을 round로 변경

이전 예제에서 마우스를 올리면 테두리 안에 다이아몬드 모양이 정수 개가 아닙니다. 이를 수정하기 위해 border-image-repeat을 round 값으로 설정합니다:

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

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

예제 . 백분율

요소에 마우스를 올리면 border-image-width 값을 50%로 설정합니다. 이렇게 하면 테두리 크기가 블록 크기의 50%가 됩니다 (즉, 오른쪽 테두리와 왼쪽 테두리가 전체 블록을 덮습니다):

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

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

예제 . 백분율

요소에 마우스를 올리면 border-image-width 값을 30%로 설정합니다. 이렇게 하면 테두리 크기가 블록 크기의 30%가 됩니다:

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

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

예제 . 픽셀

요소에 마우스를 올리면 border-image-width 값을 50px로 설정합니다:

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

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

예제 . auto 값

요소에 마우스를 올리면 border-image-width 값을 auto로 설정합니다.

마우스를 올리기 전 border-image-width는 1 값(기본값)을 가집니다. 예제에서 border-width는 52px로, border-image-slice는 26로 의도적으로 설정되었습니다 (auto 효과는 border-width와 border-image-slice가 다를 경우에만 관찰됩니다). border-image-width가 1 값을 가지기 때문에, 테두리 이미지는 전체 border-width 너비, 즉 52px까지 늘어납니다. 마우스를 올리면 border-image-width 값이 auto로 설정되고 이미지 너비는 border-image-slice 값, 즉 26px와 같아집니다:

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

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

참고 항목

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