border-image-repeat 속성

border-image-repeat 속성은 이미지로 된 테두리의 내부 부분 반복 방식을 지정합니다. 더 자세한 정보는 border-image 속성을 참조하세요.

구문

css선택자 {
  border-image-repeat: stretch | repeat | round;
}

값

기본값: stretch.

매개변수 개수

1개 또는 2개의 매개변수를 사용할 수 있습니다. 두 개의 매개변수가 주어지면, 첫 번째는 위쪽과 아래쪽 테두리에 적용되고, 두 번째 매개변수는 왼쪽과 오른쪽 테두리에 적용됩니다.

예시 . stretch 값

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

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

Результат:

예시 . repeat 값

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

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

Результат:

예시 . round 값

현재 일반 상태에는 repeat 값이 설정되어 있고, 마우스 오버 시에는 round가 설정되어 있습니다. 마우스 오버 전에는 테두리에 마름모의 정수 개수가 들어가지 않지만, 마우스 오버 후에는 정수 개수가 들어갑니다. 이것이 round의 동작 방식입니다:

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

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

Результат:

예시 . 두 개의 값

너비에는 repeat 값, 높이에는 stretch 값:

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

css#elem {
  border-image-repeat: repeat stretch;
  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;
}

Результат:

같이 보기