Properties

Properties

Draft
  • account_tree
  • bug_report

border-imageCSS3

요소의 테두리를 이미지를 이용하여 생성하는 관련 속성을 한번에 설정할 수 있는 축약식 속성이다.

설정 가능한 속성 값

  • border-image-source속성CSS3

    테두리로 사용될 이미지의 경로를 url()함수를 이용해서 설정한다. 기본 값은 'none' 이다.

  • border-image-slice속성CSS3

    테두리에 적용될 이미지의 범위를 요소의 방향에 따라 비율로 설정한다.

  • border-image-width속성CSS3

    이미지로 적용되어 있는 테두리의 두께를 설정한다. 기본 값은 1이다.

  • border-image-outset속성CSS3

    요소의 테두리에 적용되어 있는 이미지 영역이 요소의 영역을 넘어서 확장되는 크기를 설정한다.

  • border-image-repeat속성CSS3

    요소의 네 변의 테두리에 적용될 이미지의 디자인 영역이 네 변의 길이에 어떻게 대응할지를 설정한다. 기본값은 'stretch'로서 변에 해당하는 이미지의 디자인 영역을 늘려서 맞춘다.

구문

  • border-image border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;기본형식CSS3

    요소의 테두리를 이미지로 설정하는 속성 값들을 공백으로 구분하여 작성한다. 작성 순서는 무시된다. 생략된 속성 값의 경우에는 해당 속성의 기본값으로 처리된다.

  • border-image none 100% 1 0 stretch;기본값CSS3

예제

테두리를 이미지로 적용한다.

버전 명세

Version NameDescriptionFlags
CSS3

지원 웹브라우저