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-sourceCSS のプロパティで、要素の境界画像に使われる元の画像を設定します。

試してみましょう

元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために 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: revert;
border-image-source: revert-layer;
border-image-source: unset;

none

境界画像は使用されません。代わりに border-style で定義されたものが表示されます。

<image>

境界に使用する画像への参照です。

公式定義

初期値none
適用対象すべての要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
計算値none または画像の絶対化した URI
アニメーションの種類離散値

形式文法

border-image-source = 
none |
<image>

<image> =
<url> |
<gradient>

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

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

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

基本的な例

css
.box {
  border-image-source: url("image.png");
}

仕様書

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

ブラウザーの互換性

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

関連情報