border-image-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

border-image-width CSS 속성은 요소 테두리 이미지의 너비를 설정합니다.

시도해보기

속성의 값이 border-width보다 크다면 테두리 이미지는 안쪽 여백(과 콘텐츠) 영역을 침범하여 그려집니다.

구문

css
/* 키워드 값 */
border-image-width: auto;

/* <length> 값 */
border-image-width: 1rem;

/* <percentage> 값 */
border-image-width: 25%;

/* <number> 값 */
border-image-width: 3;

/* 세로방향 | 가로방향 */
border-image-width: 2em 3em;

/* 위 | 가로방향 | 아래 */
border-image-width: 5% 15% 10%;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-image-width: 5% 2em 10% auto;

/* 전역 값 */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;

border-image-width 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 음수는 유효하지 않습니다.

  • 한 개의 값은 모든 네 면의 테두리 너비를 설정합니다.
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 테두리 너비를 설정합니다.
  • 세 개의 값을 지정하면 첫 번째는 , 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 너비를 설정합니다.
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 테두리 너비를 지정합니다. (시계방향)

<length-percentage>

<length> 또는 <percentage>로 지정한 테두리 너비. 백분율 값은 왼쪽과 오른쪽 테두리에 대해선 테두리 이미지 영역의 너비, 위쪽과 아래쪽에 대해선 테두리 이미지 영역의 높이를 사용해 계산합니다.

<number>

테두리 너비로 border-width의 배수 사용

auto

방향과 일치하는 border-image-slice가 가진 원래 너비 또는 높이 사용. 이미지가 원래 크기를 가지고 있지 않으면 방향과 일치하는 border-width 크기를 사용합니다.

형식 구문

border-image-width = 
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

<length-percentage> =
<length> |
<percentage>

예제

다음 예제는 아래의 가로 90픽셀, 세로 90픽셀 이미지를 사용해 테두리 이미지를 생성합니다.

원본 이미지의 각 원은 가로 30픽셀, 세로 30픽셀입니다.

HTML

html
<p>
  밤을 쉬이 봄이 무성할 릴케 듯합니다. 토끼, 써 이런 하나에 듯합니다. 이네들은
  나는 패, 듯합니다. 나는 보고, 딴은 토끼, 이런 멀리 듯합니다. 청춘이 가을로 둘
  버리었습니다. 걱정도 밤이 나는 애기 오는 언덕 경, 계십니다. 멀리 까닭이요,
  나는 별빛이 듯합니다. 소녀들의 벌레는 걱정도 까닭이요, 북간도에 쓸쓸함과 오면
  것은 어머님, 까닭입니다.
</p>

CSS

css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

결과

명세

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-width
초기값1
적용대상all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter (en-US).
상속no
Percentagesrefer to the width or height of the border image area
계산 값as specified, but with relative lengths converted into absolute lengths
Animation typeby computed value type

브라우저 호환성

BCD tables only load in the browser