border-image-width 속성

border-image-width 속성은 테두리의 가시 부분 너비를 제어하고, 크기를 조정합니다. 이 값이 border-width의 너비보다 크면, 테두리 이미지가 콘텐츠 아래로 침범합니다.

자세한 내용은 border-image 속성을 참조하세요.

구문

css선택자 {
  border-image-width: CSS 단위 | 백분율 | 숫자 | auto;
}

값

기본값: 1.

예제 . 숫자

요소에 마우스를 올리면 border-image-width 값을 2로 설정합니다. 이렇게 하면 테두리 크기가 26px*2 - border-width에 지정된 너비의 2배가 됩니다. 테두리는 텍스트 아래로 침범합니다(배경처럼):

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

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

Результат:

예제 . border-image-repeat을 round로 변경

이전 예제에서 마우스를 올리면 테두리 안에 다이아몬드 모양이 정수 개가 아닙니다. 이를 수정하기 위해 border-image-repeat을 round 값으로 설정합니다:

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

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

Результат:

예제 . 백분율

요소에 마우스를 올리면 border-image-width 값을 50%로 설정합니다. 이렇게 하면 테두리 크기가 블록 크기의 50%가 됩니다 (즉, 오른쪽 테두리와 왼쪽 테두리가 전체 블록을 덮습니다):

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

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

Результат:

예제 . 백분율

요소에 마우스를 올리면 border-image-width 값을 30%로 설정합니다. 이렇게 하면 테두리 크기가 블록 크기의 30%가 됩니다:

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

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

Результат:

예제 . 픽셀

요소에 마우스를 올리면 border-image-width 값을 50px로 설정합니다:

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

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

Результат:

예제 . auto 값

요소에 마우스를 올리면 border-image-width 값을 auto로 설정합니다.

마우스를 올리기 전 border-image-width는 1 값(기본값)을 가집니다. 예제에서 border-width는 52px로, border-image-slice는 26로 의도적으로 설정되었습니다 (auto 효과는 border-width와 border-image-slice가 다를 경우에만 관찰됩니다). border-image-width가 1 값을 가지기 때문에, 테두리 이미지는 전체 border-width 너비, 즉 52px까지 늘어납니다. 마우스를 올리면 border-image-width 값이 auto로 설정되고 이미지 너비는 border-image-slice 값, 즉 26px와 같아집니다:

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

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

Результат:

참고 항목