본문 바로가기
Reference/CSS

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

by @webstoryboy 2023. 1. 1.

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

Reference/CSS

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

by @webs 2022. 12. 29.

border-image

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 속성은 테두리 이미지 두께 속성을 설정합니다.

관련된 속성(Related Properties)

  • border 속성은 테두리 속성을 일괄적으로 설정합니다.
  • border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
  • border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
  • border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.
  • border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
  • border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.

문법(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
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
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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

보더와 관련된 속성

  • border 속성은 테두리 속성을 일괄적으로 설정합니다.
  • border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
  • border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
  • border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.
  • border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다.
  • border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.
  • border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다.
  • border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다.
  • border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.
  • border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.
  • border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다.
  • border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다.
  • border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.
  • border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
  • border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.
  • border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다.
  • border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.
  • border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.
  • border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.
  • border-left-width 속성은 테두리 왼쪽 두께 속성을 설정합니다.
  • border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
  • border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.
  • border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.
  • border-image-slice 속성은 테두리 이미지 크기 속성을 설정합니다.
  • border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.
  • border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.
  • border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
  • border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
  • border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
  • border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.
  • border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.

참고(Reference)


댓글