border-image 속성

border-image 속성은 테두리에 이미지를 설정하며, border-image-source, border-image-slice, border-image-repeat, border-image-width, border-image-outset 속성들을 한꺼번에 지정하는 단축 속성입니다. 이 단축 속성은 CSS에서 축약된 개별 속성들보다 먼저 등장했기 때문에 더 많은 오래된 브라우저에서 지원됩니다.

문법

선택자 {
	border-image: url(이미지 경로) 오프셋/너비/시작점 반복;
}

설명

테두리에 적용하려는 이미지는 특별한 방식으로 디자인되어야 합니다: 모서리를 위한 4개의 작은 이미지와 변을 위한 4개의 이미지가 필요합니다. 예시 이미지:

이 경우 중앙 부분은 흰색으로 비워져 있습니다(요소의 배경에 표시되지 않도록 하기 위해). 중앙 부분이 채워진 이미지 예시:

slice 값은 브라우저에게 이미지의 어떤 부분이 모서리로, 어떤 부분이 변으로 사용될지(그리고 어떤 부분이 중앙이 될지) 알려줍니다. 모서리에는 4개의 부분이, 변에는 4개의 부분이 사용되며, 한 부분(중앙)은 요소의 배경으로 사용됩니다(선택 사항, fill 키워드).

이미지는 다음과 같이 조각으로 "잘립니다": slice 값에는 하나에서 네 개의 값이 지정됩니다. 예를 들어 살펴보겠습니다. 다음과 같은 값이 지정되었다고 가정합니다: 10 20 30 40 (픽셀 px은 지정하지 않습니다. 이는 이미지가 래스터와 벡터 모두 가능하기 때문입니다). 값들은 다음을 의미합니다: 10 위에서 자르기, 20 오른쪽에서 자르기, 30 아래에서 자르기, 40 왼쪽에서 자르기. 이미지의 어떤 부분이 왼쪽 위 모서리에 들어갈까요? 다음과 같은 조각이 될 것입니다: 10 위, 40 왼쪽. 오른쪽 위 모서리에는 10 위, 20 오른쪽이 들어갑니다. 나머지도 마찬가지입니다.

대부분의 경우 이미지는 대칭적입니다(위의 마름모꼴처럼). 이때는 모서리에 대해 동일한 크기의 조각을 잘라내야 합니다. 이런 경우 하나의 값만 지정하며, 이 값은 모든 면에서 동일한 오프셋을 설정합니다. 주황색 마름모를 잘라내려면 slice를 26으로 지정합니다(주황색 마름모의 크기가 26px x 26px이기 때문). 노란색 마름모들은 테두리 선을 따라 위치하며 다음과 같이 처리됩니다: 전체 블록에 걸쳐 늘어나거나 테두리를 따라 반복됩니다(repeat 값에 따라 다름):

<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;
}

<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;
}

border-image 속성은 요소 테두리의 두께를 지정할 수 없습니다. 브라우저는 단순히 기존 너비를 가진 테두리를 따라 이미지를 늘립니다. 따라서 테두리 두께는 border 속성을 통해 설정해야 합니다.

오래된 브라우저 사용자나 이미지가 비활성화된 사용자는 border에 지정된 표준 테두리를 보게 되므로, 적절한 스타일과 색상을 지정하는 것이 좋습니다.

값

값	설명
url(이미지 경로)	이미지 경로. 자세한 내용은 `border-image-source`를 참조하세요.
오프셋	이미지의 어떤 부분이 모서리로, 어떤 부분이 변으로 사용될지(그리고 어떤 부분이 중앙이 될지) 브라우저에 알려줍니다. 가능한 값: `1`개에서 `4`개의 숫자 \| `1`개에서 `4`개의 백분율. 숫자나 백분율에 추가하여 `fill` 키워드를 공백으로 구분하여 지정할 수 있습니다. 자세한 내용은 `border-image-slice`를 참조하세요.
너비	이 속성은 테두리의 보이는 부분의 너비를 제어하고 크기를 조정합니다. 이 값이 `border-width`의 너비보다 크면 테두리 이미지가 콘텐츠 아래로 침범합니다. 가능한 값: CSS 단위 \| 백분율 \| 숫자 \| `auto`. 자세한 내용은 `border-image-width`를 참조하세요.
시작점	테두리를 요소의 경계 밖으로 밀어낼 수 있게 해주는 흥미로운 속성입니다. 음수 값은 지원되지 않습니다. 가능한 값: CSS 단위 (% 제외 (?)) \| 양수 \| auto. 자세한 내용은 `border-image-outset`를 참조하세요.
반복	테두리(모서리가 아닌)에서 이미지를 어떻게 반복할지 지정합니다: 바둑판식으로 배열하거나 늘립니다. 가능한 값: `stretch` \| `repeat` \| `round` \| `space`. 자세한 내용은 `border-image-repeat`를 참조하세요.

기본값: none 100%/1/0 stretch (url(이미지 경로) 오프셋/너비/시작점 반복).

예제 . border-image-repeat: repeat 값

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

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

예제 . border-image-repeat: stretch 값

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

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

예제 . border-image-repeat: round 값

현재 기본 상태에서는 repeat 값이 설정되어 있고, 마우스를 가져가면 round 값이 설정됩니다. 마우스를 가져가기 전에는 테두리에 마름모가 정수 개만큼 들어가지 않지만, 마우스를 가져간 후에는 정수 개가 들어갑니다. round가 이렇게 동작합니다:

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

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

예제 . border-image-repeat: 두 개의 단어

너비에 대해서는 repeat 값, 높이에 대해서는 stretch 값:

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

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

예제 . 이미지 너비와 테두리 너비 일치

마우스를 가져가면 border-width를 늘리지만, border-image의 두께는 동일하게 유지합니다. 마름모가 전체 테두리에 걸쳐 늘어납니다:

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

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

예제 . border-image-slice

조각들의 크기가 다른 다른 이미지를 사용해 보겠습니다:

이미지에서 어떤 부분을 잘라낼지 지정합니다 - 25% 30% 10% 20%. 작동 방식은 다음과 같습니다: 25% - 위쪽 여백, 30% - 오른쪽 여백, 10% - 아래쪽 여백, 20% - 왼쪽 여백. 본질적으로 이 조각들로 모서리를 잘라냅니다. 왼쪽 위 모서리는 이미지의 25% 위쪽과 20% 왼쪽이 됩니다. 오른쪽 위 모서리는 이미지의 25% 위쪽과 30% 오른쪽이 됩니다. 나머지도 마찬가지입니다.

또한, 블록에 마우스를 가져가면 fill 키워드가 활성화되고, 이미지의 중앙 부분이 우리 블록의 배경이 됩니다:

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

예제

선형 그라데이션을 사용하여 그라데이션 테두리를 만들어 보겠습니다:

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

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

예제 . border-image-width

border-image-width 값을 2로 설정합니다 (테두리 이미지가 테두리 자체보다 2배 커집니다). 요소에 마우스를 가져가면 활성화됩니다(26/2 - 슬래시 뒤에 지정했으며, 26은 border-image-slice 값입니다). 테두리 자체는 늘어나지 않지만 테두리 이미지는 늘어나서 텍스트 아래로 침범한다는 점에 주목하세요:

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

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

예제 . border-image-outset

요소에 마우스를 가져가면 border-image-outset 값을 3로 설정합니다. (26/1/2 - 두 번째 슬래시 뒤에 지정했으며, 26는 border-image-slice 값이고, 1은 border-image-width 값입니다):

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

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

참고 항목

테두리 이미지의 경로를 설정하는 속성 border-image-source,
테두리 이미지의 분할을 설정하는 속성 border-image-slice,
테두리 이미지의 반복을 설정하는 속성 border-image-repeat,
테두리 이미지의 크기를 설정하는 속성 border-image-width,
테두리 이미지의 오프셋을 설정하는 속성 border-image-outset,