“border-image-source”プロパティ:境界線として使用する画像

概要

“border-image-source”プロパティは境界線として使用するための画像を指定するプロパティです。

“border-image-source”プロパティで指定された画像は“border-image-slice”プロパティで指定された方法で分割され、境界線の角や辺として使用されます。

“border-image-source”プロパティによって指定された画像は“border-style”プロパティによって指定された境界線の代わりに表示されます。

サンプルコード

値

仕様書

定義されている仕様書

border-image-source

none
<image>

境界線用の画像を指定する

div {

border-style: solid;
border-width: 20px;
border-image-slice: 200 fill;
border-image-source: url(border-image_sample.png);

}

div {

border-style: solid;
border-width: 20px;
border-image-slice: 1;
border-image-source: linear-gradient(rgb(66,174,147), rgb(28,20,15));

}

境界線に画像を使用しない

div {

border-style: solid;
border-width: 20px;
border-image-source: none;

}

border-image-source: none;