CSSリファレンス

実践向けCSSリファレンス

罫線(ボーダー)に画像ファイルを設定する border-image-source

概要

CSSプロパティ「border-image-source」は、罫線(ボーダー)領域に使用する画像ファイルを指定することができます。またこのプロパティは上下左右4枚の画像は不要で、1枚の画像を分割して実現します。

<div class="border-image-1">ボーダーに画像を挿入しています</div>
<style>
div {
 border: 10px solid #def;
}
.border-image-1 {
 border-image-slice: 24;
 border-image-repeat: repeat;
 border-image-source: url("http://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png");
}
</style>

またこれらをまとめて指定する場合は border-image プロパティを使用します。

値の指定方法

値は1つから4つ指定することができます。

{ border-image-source: url(画像パス) }

値について

指定できる値の種類です。

説明
url画像のURLを、url(画像のurl)形式などで指定します
none画像ファイルを指定しません

プロパティの種類について

「border-image-source」 プロパティは、border-image を細分化したプロパティです。こちらの一覧で全体を確認しておきましょう。

プロパティ名説明
border-image-source画像の参照元を指定する
border-image-slice画像のボーダー使用範囲を指定する
border-image-repeat画像ボーダーの繰り返しを指定する
border-image-width画像ボーダーの太さ(内側に向かう)を指定する
border-image-outset画像ボーダーイメージエリア(外側に向かう)を指定する

使用例

指定する画像pathを変更してみます。

<div class="border-image-1">ボーダーに画像を挿入しています</div>
<div class="border-image-2">ボーダーに画像を挿入しています</div>
<style>
div {
 border: 10px solid #def;
 margin-bottom: 10px;
}
.border-image-1 {
 border-image-slice: 24;
 border-image-repeat: repeat;
 border-image-source: url("http://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png");
}
.border-image-2 {
 border-image-slice: 26;
 border-image-repeat: repeat;
 border-image-source: url("http://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample_st.png");
}

</style>

仕様書

関連CSSプロパティ

閉じる