border-image

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

특징	설명
기본 값	border-image-source : none border-image-slice : 100% border-image-width : 1 border-image-outset : 0s border-image-repeat : stretch
상속	안됨
애니메이션	안됨
버전	CSS3

Definition

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

Syntax

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

/* 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	테두리 이미지 반복을 설정합니다.
inherit	테두리 이미지 속성을 부모 요소로부터 상속받습니다.

Compatibility

							6	7	8	9	10	11
border-image
border-image-width
border-image-source
border-image-slice
border-image-repeat
border-image-ouset