Reference/CSS

border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.

by @webs 2022. 12. 29.

border-image

border-image는 테두리에 이미지를 넣는 기능으로, 이미지를 9등분하여 해당 부분이 네 면에 설정하는 기능입니다. 단순한 이미지도 넣을 수 있지만, 특별한 테두리를 만들고 싶다면 이 속성을 이용하면 편하게 만들 수 있습니다. border-image 속성은 border와 같이 사용됩니다.

특징	설명
기본값	border-image-source : none border-image-slice : 100% border-image-width : 1 border-image-outset : 0 border-image-repeat : stretch
적용	border
버전	CSS3
사용성	★☆☆☆☆

정의(Definition)

border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.

비교(Compare)

border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.
border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.
border-image-slice 속성은 테두리 이미지 영역 속성을 설정합니다.
border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.
border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.

문법(Syntax)

border-image : border-image-source | border-image-slice | border-image-width | border-image-outset | border-image-repeat

/* 이미지 경로 설정 */
border-image-source: none;
border-image-source: url("../image.jpg");

/* 이미지 영역 설정 */
border-image-slice: 10;                 /* 숫자 */
border-image-slice: 10%;                /* 퍼센트 */
border-image-slice: fill;               /* 키워드 */
border-image-slice: 10% fill;           /* 퍼센트, 키워드 */
border-image-slice: 30%;                /* 위쪽,오른쪽,아래쪽,왼쪽 */
border-image-slice: 10% 20%;            /* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-image-slice: 10% 20% 30%;        /* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-image-slice: 10% 20% 30% 40%;    /* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */

/* 이미지 두께 설정 */
border-image-width: auto;               /* 키워드 */
border-image-width: 1px;                /* length */
border-image-width: 10%;                /* percenter */
border-image-width: 4;                  /* number */
border-image-width: 1em;                /* 위쪽,아래쪽,왼쪽,오른쪽 */
border-image-width: 1em 2em;            /* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-image-width: 1em 2em 3em;        /* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-image-width: 1em 2em 3em 4em;    /* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */

/* 이미지 거리 설정 */
border-image-outset: 1px;               /* length */
border-image-outset: 1.5;               /* number */
border-image-outset: 1 1.3;             /* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-image-outset: 1px 2px 3px;       /* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-image-outset: 1px 2px 3px 4px;   /* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */

/* 이미지 반복 설정 */
border-image-repeat: stretch;           /* 키워드 */
border-image-repeat: repeat;            /* 키워드 */
border-image-repeat: round;             /* 키워드 */
border-image-repeat: space;             /* 키워드 */
border-image-repeat: repeat space;      /* 위쪽,아래쪽 | 왼쪽,오른쪽 */

/* 다중 속성 */
border-image: url("img.png") 50;                          /* 이미지 | 슬라이스 */
border-image: url("img.png") 50 round;                    /* 이미지 | 슬라이스 | 반복 */
border-image: url("img.png") 50 / 20px round;             /* 이미지 | 슬라이스 | 두께 | 반복 */
border-image: url("img.png") 50 / 20px / 30px round;      /* 이미지 | 슬라이스 | 두께 | 거리 | 반복 */
border-image: url("img.png") 50 / 20px / 30px round stretch;            /* 이미지 | 슬라이스 | 두께 | 거리 | 반복(가로/세로) */
border-image: url("img.png") 50 / 20px 30px / 30px round stretch;       /* 이미지 | 슬라이스(가로/세로) | 두께 | 거리 | 반복(가로/세로) */

/* 전역 속성 */
border-image: inherit;   /* 상속 */
border-image: initial;   /* 초기화 */
border-image: revert;    /* 원래대로 돌리기 */
border-image: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
border-image-source	border-image-source: url("../image/jpg")	테두리 이미지 경로를 설정합니다.
border-image-slice	border-image-slice: 10%;	테두리 이미지 영역을 설정합니다.
border-image-width	border-image-width: 10px	테두리 이미지 두께 설정합니다.
border-image-outset	border-image-outset: 10px;	테두리 이미지 간격을 설정합니다.
border-image-repeat	border-image-repeat: repeat;	테두리 이미지 반복 속성을 설정합니다.

예제1(Sample)

테두리 이미지 스타일을 설정한 예제입니다.

border: 50px solid #4390e1

border-image: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png") 50 border-image: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png") 50 round border-image: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png") 50 / 20px round border-image: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png") 50 / 30px round border-image: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png") 50 / 30px / 20px round border-image: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png") 50 / 30px / 30px round border-image: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png") 50 / 30px / 10px round stretch

HTML

CSS

SCRIPT

<div id="border-box" class="bg1">
    <div class="box"><span>border: 50px solid #4390e1</span></div>
</div>

#border-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
#border-box .box {
    width: 100%;
    max-width: 400px;
    background-color: #a2cbfa;
    color: #fff;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-width: 50px;
    border-style: dotted;
    border-image-source: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png");
    border-image-width: 20px 20px 20px 20px;
    border-image-slice: 50 50 50 50;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round;
}
#border-box.bg1 .box {
    border-image-source: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png");
}
#border-box.bg2 .box {
    border-image-source: url("https://tistory4.daumcdn.net/tistory/783187/skin/images/bi02.png");
}
#border-box.bg3 .box {
    border-image-source: url("https://tistory3.daumcdn.net/tistory/783187/skin/images/bi03.png");
}
#border-box.bg4 .box {
    border-image-source: url("https://tistory4.daumcdn.net/tistory/783187/skin/images/bi04.png");
}
#border-box.bg5 .box {
    border-image-source: url("https://tistory4.daumcdn.net/tistory/783187/skin/images/bi05.png");
}
#border-box.bg6 .box {
    border-image-source: url("https://tistory3.daumcdn.net/tistory/783187/skin/images/bi06.png");
}

//javascript none

예제2(Sample)

테두리 이미지 스타일을 설정한 예제입니다.

border: 50px solid #4390e1

bg1 bg2 bg3 bg4 bg5 bg6

border-image-width: 10px; border-image-width: 20px; border-image-width: 30px;

border-image-slice: 30; border-image-slice: 40; border-image-slice: 50; border-image-slice: 50 fill; border-image-slice: 40 fill; border-image-slice: 30 fill;

border-image-outset: 0px; border-image-outset: 5px; border-image-outset: 15px; border-image-outset: 25px;

border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space border-image-repeat: stretch round border-image-repeat: round stretch

HTML

CSS

SCRIPT

<div id="border-box" class="bg1">
    <div class="box"><span>border: 50px solid #4390e1</span></div>
</div>

#border-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
#border-box .box {
    width: 100%;
    max-width: 400px;
    background-color: #a2cbfa;
    color: #fff;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-width: 50px;
    border-style: dotted;
    border-image-source: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png");
    border-image-width: 20px 20px 20px 20px;
    border-image-slice: 50 50 50 50;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round;
}
#border-box.bg1 .box {
    border-image-source: url("https://tistory2.daumcdn.net/tistory/783187/skin/images/bi01.png");
}
#border-box.bg2 .box {
    border-image-source: url("https://tistory4.daumcdn.net/tistory/783187/skin/images/bi02.png");
}
#border-box.bg3 .box {
    border-image-source: url("https://tistory3.daumcdn.net/tistory/783187/skin/images/bi03.png");
}
#border-box.bg4 .box {
    border-image-source: url("https://tistory4.daumcdn.net/tistory/783187/skin/images/bi04.png");
}
#border-box.bg5 .box {
    border-image-source: url("https://tistory4.daumcdn.net/tistory/783187/skin/images/bi05.png");
}
#border-box.bg6 .box {
    border-image-source: url("https://tistory3.daumcdn.net/tistory/783187/skin/images/bi06.png");
}

//javascript none

호환성(Compatibility)

						6	7	8	9	10	11
border-image	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
border-image-source	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
border-image-slice	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
border-image-width	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
border-image-outset	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
border-image-repeat	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○