border-image-outset

border-image-outset CSS 속성은 요소의 테두리 상자와 테두리 이미지의 거리를 설정합니다.

border-image-outset으로 인해 요소 바깥에 그려지는 테두리로는 스크롤이 생기지 않으며 마우스 이벤트를 잡아낼 수도 없습니다.

구문

/* <length> 값 */
border-image-outset: 1rem;

/* <number> 값 */
border-image-outset: 1.5;

/* 세로방향 | 가로방향 */
border-image-outset: 1 1.2;

/* 위 | 가로방향 | 아래 */
border-image-outset: 30px 2 45px;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-image-outset: 7px 12px 14px 5px;

/* 전역 값 */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: unset;

border-image-outset 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 <length>나 <number>입니다. 음수는 유효하지 않습니다.

  • 한 개의 값은 모든 네 면의 거리를 설정합니다.
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 거리를 설정합니다.
  • 세 개의 값을 지정하면 첫 번째는 , 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 거리를 설정합니다.
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 거리를 지정합니다. (시계방향)

<length>
테두리 거리의 크기로 고정값 사용.
<number>
테두리 거리의 크기로 border-width의 배수 사용.

형식 구문

[ <length> | <number> ]{1,4}

예제

HTML

<div id="outset">밖으로 나간 테두리를 가지고 있어요!</div>

CSS

#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5;  /* = 1.5 * 1.4rem = 2.1rem */
  margin: 2.1rem;
}

결과

명세

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image-outset' in that specification.
Candidate Recommendation Initial definition
초기값0
적용대상all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
상속no
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typeby computed value type

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-image-outsetChrome Full support 15Edge Full support 12Firefox Full support 15IE Full support 11Opera Full support 15Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 15Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.0

Legend

Full support  
Full support