[border] CSS - border-image-width 속성 - 테두리 이미지 너비 (= border-image-width속성 = 보더이미지위드스속성)

예제

<style> 

#hz { 

    border: 10px solid transparent;

    padding: 15px;

    border-image-source: url(https://www.w3.org/TR/css3-background/border.png);

    border-image-repeat: round;

    border-image-slice: 30;

    border-image-width: 10px;        

}

</style>

<p id="hz">홈짱닷컴 (Homzzang.com)</p>

결과보기

정의, 사용법

테두리 이미지의 너비를 지정

1. 기본 속성값: 1
2. 상속 여부: 상속 X
3. 애니메이션 여부: 가능 X
4. 도입: CSS3
5. JS구문: object.style.borderImageWidth="20px"
6. IE11 이상 최신 주요 브라우저

구문

선택자 {border-image-width: 속성값;}

속성값

px 단위
숫자 :  border-width 너비값의 배수 의미. (기본값 1)
% 단위
auto : border-image-slice로 지정한 각 두께
initial : 기본 속성값으로 지정
inherit : 부모 요소의 속성값 상속

숫자 개수 별 의미

10px :  상, 우, 하, 좌 모두 10px
10px 20px : 상하 10px , 우좌 20px
10px 20px 30px : 상 10px , 우좌 20px, 하 30px
10px 20px 30px 40px : 상 10px , 우 20px , 하 30px , 좌 40px