Style borderImage 속성

정의와 사용법

borderImage 속성은 다음 속성을 설정하는 간결한 속성입니다:

빠진 값은 기본 값으로 설정됩니다.

또한 참고:

CSS 참조 가이드:border-image 속성

예제

<div> 요소의 경계선에 이미지를 지정하세요:

document.getElementById("myDIV").style.borderImage = "url(border.png) 30 30 round";

직접 테스트해 보세요

문법

borderImage 속성 반환:

object.style.borderImage

borderImage 속성 설정:

object.style.borderImage = "source slice width outset repeat|initial|inherit"

속성 값

값 설명
borderImageSource 경계선으로 사용할 이미지의 경로.
borderImageSlice 이미지 경계선의 내부 이동.
borderImageWidth 이미지 경계선의 너비.
borderImageOutset 경계선 이미지 영역이 경계 상자(border box)를 벗어나는 양.
borderImageRepeat 이미지 경계선은 타일링(repeated), 채우기(rounded) 아니면 늘리기(stretched)여야 합니까?
initial 이 속성을 기본 값으로 설정합니다. 참고: initial.
inherit 이 속성을 부모 요소에서 이어받습니다. 참고: inherit.

기술 세부 사항

기본 값: none 100% 1 0 stretch
반환 값: 문자열로, 요소의 border-image 속성.
CSS 버전: CSS3

브라우저 지원

표에서 수치는 이 특성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
16.0 11.0 15.0 6.0 15.0