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: revert;
border-image-source: revert-layer;
border-image-source: unset;

値

none

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

<image>

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

公式定義

初期値none
適用対象すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::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

ブラウザーの互換性

BCD tables only load in the browser

関連情報