This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

border-image-outset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

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

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

시도해 보기

border-image-outset: 0; 
border-image-outset: 15px; 
border-image-outset: 30px; 
border-image-outset: 40px; 
<section id="default-example"> <div id="example-element">This is a box with a border around it.</div> </section> 
#example-element { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; padding: 50px; background: #fff3d4; color: #000; border: 30px solid; border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 round; font-size: 1.2em; } 

구문

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

형식 구문

border-image-outset = 
[ <length [0,∞]> | <number [0,∞]> ]{1,4}

예제

HTML

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

CSS

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
CSS Backgrounds and Borders Module Level 3
# border-image-outset
초기값0
적용대상all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
상속no
계산 값as specified, but with relative lengths converted into absolute lengths
Animation typeby computed value type

브라우저 호환성