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 February 2017.

border-image-source CSS 속성은 요소의 테두리 이미지로 사용할 원본 이미지를 지정합니다.

시도해보기

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> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

예제

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

명세

Specification
CSS Backgrounds and Borders Module Level 3
# the-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 typediscrete

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-image-source

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support