속성 border-image-outset

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

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

구문

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

예제 . 숫자

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

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

css#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만큼 외부로 확장됩니다:

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

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

Результат:

참고 항목