CSS 테두리 이미지 속성

❮ 이전 완전한 CSS 참조 다음 ❯

예시

요소 주위의 테두리로 이미지를 지정합니다.

#borderimg {
border-image: url(border.png) 30 round;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

속성을 사용하면 요소 주변 의 border-image테두리로 사용할 이미지를 지정할 수 있습니다.

border-image 속성은 다음에 대한 약식 속성입니다.

생략된 값은 기본값으로 설정됩니다.

기본값:	없음 100% 1 0 스트레치
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS3
자바스크립트 구문:	object .style.borderImage="url(border.png) 30 라운드"

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

참고: 아래의 각 값에 대한 개별 브라우저 지원을 참조하십시오.

CSS 구문

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

속성 값

Value	Description	Play it
border-image-source	The path to the image to be used as a border
border-image-slice	How to slice the border image
border-image-width	The width of the border image
border-image-outset	The amount by which the border image area extends beyond the border box
border-image-repeat	Whether the border image should be repeated, rounded or stretched
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

다른 슬라이스 값은 테두리의 모양을 완전히 변경합니다.

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}

CSS 참조

CSS Properties