속성 border-image-outset

속성 border-image-outset는 테두리를 요소의 외부로 확장할 수 있게 해줍니다. 값으로는 단위 없이 숫자 혹은 크기 단위 (백분율 제외)를 지정할 수 있습니다. 단위 없이 숫자를 지정하면, 이 숫자는 속성 border-width의 값에 곱해지는 배수가 됩니다. 음수 값은 지원되지 않습니다.

테두리 이미지에 대한 더 자세한 정보는 속성 border-image를 참고하세요.

구문

선택자 {
	border-image-outset: 양수 숫자;
}

예제 . 숫자

요소에 마우스를 올리면 border-image-outset 값을 3으로 설정합니다. 이때 테두리는 26px*3 - border-width로 지정된 테두리 두께의 3배만큼 외부로 확장됩니다:

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

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

예제 . 픽셀

요소에 마우스를 올리면 border-image-outset 값을 30px으로 설정합니다. 이때 테두리는 30px만큼 외부로 확장됩니다:

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

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

참고 항목

속성 border-image,
테두리 이미지를 위한 단축 속성
속성 border-image-source,
테두리 이미지의 경로를 지정하는 속성
속성 border-image-slice,
테두리 이미지를 분할하는 속성
속성 border-image-repeat,
테두리 이미지의 반복 방식을 지정하는 속성
속성 border-image-width,
테두리 이미지의 크기를 지정하는 속성