Properties

Properties

Editing
  • account_tree
  • bug_report

border-image-outset

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

설명

위, 오른쪽, 아래, 왼쪽 순으로 네 개의 값을 이용해서 방향별로 확장 범위를 설정할 수 있다. 값은 생략될 수 있으나 반드시 한 개 이상의 값을 설정해야 한다.

사용 가능한 값 타입

〈'border-image-outset'〉

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈length〉

    숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

  • 〈number〉

    정수 또는 실수를 표현한다.

구문

  • border-image-outset 0;
  • border-image-outset 2px 1px 3px 4px;CSS3

    네 개의 값이 공백으로 구분된 경우에는 차례대로 위, 오른쪽, 아래, 왼쪽 방향의 확장 값으로 설정된다.

  • border-image-outset 2px 1px 3px;CSS3

    네번째 값이 생략된 상태로 세 개의 값이 공백으로 구분된 경우 첫번째 값은 위쪽, 두번째 값은 오른쪽, 세번째 값은 아래쪽의 확장 값으로 사용된다. 생략된 네번째 값은 두번째 값으로 설정된다.

  • border-image-outset 2px 1px;CSS3

    세번째와 네번째 값이 생략된 상태로 두 개의 값이 공백으로 구분된 경우 첫번째 값은 위쪽, 두번째 값은 오른쪽이며 생략된 세번째 값은 첫번째 값으로, 생략된 네번째 값은 두번째 값으로 설정된다.

  • border-image-outset 2px;CSS3

    요소의 네 방향 모두 동일한 2px의 크기로 확장한다.

예제

테두리가 확장되는 크기를 지정한다.

지원 웹브라우저