罫線（ボーダー）に画像を設定するショートハンド

CSS - border-image

概要

CSSプロパティ｢border-image｣は、要素のボーダー（境界線）に画像を描画することのできるショートハンドプロパティです。また、CSSプロパティ border-style で指定されたボーダースタイルの代わりとなります。このプロパティで指定されている詳細は以下の内容となります。

  • border-image-source･･･画像の参照元を指定する
  • border-image-slice･･･画像のボーダー使用範囲を指定する
  • border-image-width･･･画像ボーダーの太さを指定する
  • border-image-outset･･･画像ボーダーイメージエリアを指定する
  • border-image-repeat･･･画像ボーダーの繰り返しを指定する

この画像をボーダーに挿入してみます。縦横72pxの画像です。

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

値の指定方法

それぞれの値は半角スペースで区切って指定します。基本的に順序は任意で指定できますが、 border-image-outset プロパティの値は、border-image-width プロパティの隣で、スラッシュをつけて続けて指定します。

{ border-image: -source -slice -width / -outset  -repeat; }

各値の初期値と説明です。指定しなかった場合は初期値がはいります。

値初期値説明
border-image-sourceの値none画像の参照元を指定する。
border-image-sliceの値100%画像のボーダー使用範囲を指定する
border-image-widthの値1画像ボーダーの太さを指定する
border-image-outsetの値0s画像ボーダーイメージエリアを指定する
border-image-repeatの値 stretch画像ボーダーの繰り返しを指定する

少々複雑な仕様なので、上記の表示を順を追って確認していきましょう。

画像url・・border-image-source

まず、参照元となる画像のurlを指定します。詳細は border-image-source に記載されています。

ボーダーの４つの隅に画像が反映されました。

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

画像のボーダー使用範囲・・border-image-slice

次に画像の使用範囲についてですが、このプロパティで使われる画像は縦３つ×横３つの計9つのイメージパーツに分割されます。その際に上下左右どの位置で分割するかをこのCSSプロパティ border-image-slice の値で指定します。先ほどのサンプルだと画像サイズが72pxでその3分の1を値を指定しました。そうすると、以下の画像のようなところで分割されるというわけです。

ではその分割された画像がどの場所にどの画像が使用されているか確認してみます。画像に番号を振って表示させてみます。

そうすると、どの位置にどのスライスされた画像が当たっているか確認できるようになってきました。しかしちょっとまだわかりづらいですね。次に画像の繰り返しを指定する値をみてみましょう。

<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: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png") 24;
}
.border-image-2 {
  border-image: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample_number.png") 24;
}
</style>

画像ボーダーの繰り返しを指定・・border-image-repeat

次はCSSプロパティborder-image-repeat です。この値の｢repeat｣を指定することで繰り返しを表現してみます。そうすると画像の繰り返し状態がわかりやすくなりました。他の指定できる値については border-image-repeat ページを参照してみてください。

<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: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png") 24 repeat;
}
.border-image-2 {
  border-image: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample_number.png") 24 repeat;
}
</style>

画像ボーダーの太さと位置を指定する・・border-image-width, border-image-outset

この border-image-width を指定すると、ボーダーイメージエリアの上下左右の端から内側への太さを指定することができます。またその逆に外側への位置を指定したい場合は border-image-outset を使います。値はスラッシュで区切って指定します。

<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: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png") 24 repeat;
}
.border-image-2 {
  border-image: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample_number.png") 24 / 1em / 1em repeat;
}
</style>

使用例

繰り返し画像を使用することで、ボーダーの太さに関係なく表現することができます。この繰り返し画像を使って表現してみましょう。

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

仕様書

関連CSSプロパティ