[CSS] border-image

border-image

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

---

border-image

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

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

정의(Definition)

• border-image 테두리 이미지 속성을 설정합니다.

문법(Syntax)

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

/* source을 설정한 경우 */
border-image : url(../img/image.jpg);

/* source | width | height을 설정한 경우 */
border-image : url(../img/image.jpg) 10 10;

/* source | width | height | repeat을 설정한 경우 */
border-image : url(../img/image.jpg) 20 10 round;

/* source | width | height | repeat을 설정한 경우 */
border-image : url(../img/image.jpg) 20 10 stretch;

속성(Property)

속성값	설명
border-image-source	테두리 이미지 경로를 설정합니다.
border-image-slice	테두리 이미지 크기를 설정합니다.
border-image-width	테두리 이미지 두께를 설정합니다.
border-image-outset	테두리 이미지 간격을 설정합니다.
border-image-repeat	테두리 이미지 반복을 설정합니다.

호환성(Compatibility)

						6	7	8	9	10	11
border-image	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능
border-image-source	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능
border-image-slice	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능
border-image-width	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능
border-image-outset	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능
border-image-repeat	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능

---