border-image-source 속성

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

구문

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

예제

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

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

css#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%이기 때문입니다):

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

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

Результат:

예제

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

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

css#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%이기 때문입니다):

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

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

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

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

Результат:

같이 보기