border-image-source

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-source CSS 속성은 요소의 테두리 이미지로 사용할 원본 이미지를 지정합니다.

시도해 보기

border-image-source: url("/shared-assets/images/examples/border-diamonds.png");

border-image-source: url("/shared-assets/images/examples/border-stars.png");

border-image-source: repeating-linear-gradient(
 45deg,
 transparent,
 #4d9f0c 20px
);

border-image-source: none;

<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;
}

border-image-slice 속성으로 나뉜 구역을 사용해 최종 테두리 이미지를 생성합니다.

구문

css

/* 키워드 값 */
border-image-source: none;
/* <image> 값 */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);
/* 전역 값 */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;

값

none: 테두리 이미지를 사용하지 않습니다. border-style이 대신 표시됩니다.
<image>: 테두리에 사용할 이미지 참조입니다.

형식 구문

border-image-source = 
 none | 
 <image> 

<image> = 
 <url> | 
 <image()> | 
 <image-set()> | 
 <cross-fade()> | 
 <element()> | 
 <gradient> 

<image()> = 
 image( <image-tags>? [ <image-src>? , <color> ? ]! ) 

<image-set()> = 
 image-set( <image-set-option># ) 

<cross-fade()> = 
 cross-fade( <cf-image># ) 

<element()> = 
 element( <id-selector> ) 

<image-tags> = 
 ltr | 
 rtl 

<image-src> = 
 <url> | 
 <string> 

<image-set-option> = 
 [ <image> | <string> ] [ <resolution> || type( <string> ) ] ? 

<cf-image> = 
 [ <image> | <color> ] && 
 <percentage [0,100]> ? 

<id-selector> = 
 <hash-token>

예제

border-image에서 확인할 수 있습니다.

명세

Specification
CSS Backgrounds and Borders Module Level 3 # border-image-source

초기값	`none`
적용대상	all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter`.
상속	no
계산 값	`none` or the image with its URI made absolute
Animation type	discrete

브라우저 호환성

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025년 11월 9일⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content