Reference/CSS

border-image-slice 속성은 테두리 이미지 영역 속성을 설정합니다.

by @webs 2023. 01. 01.

border-image-slice

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

특징	설명
기본값	border-image-slice : 100%
적용	border
버전	CSS3
사용성	★☆☆☆☆

정의(Definition)

border-image-slice 속성은 테두리 이미지 영역 속성을 설정합니다.

비교(Compare)

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

문법(Syntax)

border-image-slice : number | percentage | fill

/* 기본 속성 */ 
border-image-slice: 10;             /* 숫자 */
border-image-slice: 10%;            /* 퍼센트 */
border-image-slice: fill;           /* 키워드 */
border-image-slice: 10% fill;       /* 퍼센트, 키워드 */

/* 다중 속성 */ 
border-image-slice: 10%;                /* 위쪽,오른쪽,아래쪽,왼쪽 */
border-image-slice: 10% 20%;            /* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-image-slice: 10% 20% 30%;        /* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-image-slice: 10% 20% 30% 40%;    /* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */

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

속성(Property)

속성값	값(예)	설명
number	border-image-slice: 10;	모서리부터 분할선까지 픽셀로 설정합니다.
percentage	border-image-slice: 2%	모서리부터 분할선까지 퍼센트로 설정합니다.
fill	border-image-width: fill	중앙영역을 배경이미지처럼 설정합니다.

예제1(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");
}