Reference/CSS

border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.

by @webs 2023. 01. 01.

border-image-outset

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

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

정의(Definition)

border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.

비교(Compare)

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

문법(Syntax)

border-image-outset : length | number

/* 기본 속성 */ 
border-image-outset: 1px;               /* length */
border-image-outset: 1.5;               /* number */

/* 다중 속성 */ 
border-image-outset: 1px;               /* 위쪽,아래쪽,왼쪽,오른쪽 */
border-image-outset: 1px 2px;           /* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-image-outset: 1px 2px 3px;       /* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-image-outset: 1px 2px 3px 4px;   /* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */

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

속성(Property)

속성값	값(예)	설명
length	border-image-outset: 2px	이미지 간격을 CSS 단위로 설정합니다.
repeat	border-image-outset: 2;	이미지 간격을 숫자로 설정합니다.

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