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 July 2015.

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