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의 배수 사용.

형식 구문

[ (en-US) <length> | (en-US) <number> ] (en-US){ (en-US)1,4} (en-US)

예제

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 (en-US).
상속	no
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	by computed value type

브라우저 호환성

BCD tables only load in the browser