border-image-source 속성

border-image-source 속성은 테두리 이미지를 지정합니다. 자세한 정보는 border-image 속성을 참조하세요.

구문

선택자 {
	border-image-source: url(이미지 경로);
}

예제

border-image-source 속성은 border-image-slice와 함께 지정해야 합니다:

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

#elem {
	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-slice 속성을 지정하지 않으면, 이미지 전체가 모서리 부분에 들어갑니다 (border-image-slice의 기본값이 100%이기 때문입니다):

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

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

예제

이미지 대신 선형 그라데이션을 지정할 수 있습니다:

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

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-image-slice: 30;
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

예제

border-image-slice 속성을 지정하지 않으면, 그라데이션이 모서리 부분에 들어갑니다 (border-image-slice의 기본값이 100%이기 때문입니다):

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

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

예제

border-radius 속성을 지정해도 테두리가 둥글게 처리되지는 않습니다 (그라데이션의 경우도 마찬가지입니다). 하지만 효과 자체는 꽤 흥미롭습니다:

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

#elem {
	border-radius: 100px;
	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-slice 속성,
테두리 이미지 분할
border-image-repeat 속성,
테두리 이미지 반복
border-image-width 속성,
테두리 이미지 크기 지정
border-image-outset 속성,
테두리 이미지 확장 지정