ウェブランサー

border-image-slice - ボーダー(枠線)に指定された画像の使用範囲を指定する

取り扱い 標準
適用可能 全ての要素(border-collapseプロパティの値にcollapseが指定されたtable要素を除く)
継承 しない
対応ブラウザ border-image-sliceの対応状況を確認する

border-image-sliceプロパティの説明

border-image-sliceは、ボーダー(枠線)に表示する画像の使用範囲を指定します。画像の上下左右4つの端から距離を指定して基準線を引き、4つの辺、4つの角、中心部の9つの領域を定義します。ここで定義された領域のうち、真ん中以外の範囲をボーダーに表示する素材にします。

border-image-sliceのイメージ図

値を指定する順番は Top, Right, Bottom, Left になります。4番目の値が省略された場合には、2番目の値と同じになります。3番目の値が省略された場合には、1番目の値と同じになります。2番目の値が省略された場合には、1番目の値と同じになります。

このプロパティには、負の値を指定することはできません。また、画像サイズよりも大きな値を指定した場合には、100%であると解釈されます。

ボーダーに画像を表示するための他のプロパティも同時に定義する場合には、border-imageを用いて下さい。

borderに画像を表示させる場合、border-styleで与えられたボーダーのスタイルの代わりに使われます。border-image-sourceの値がnone、または画像が表示されない場合には、border-styleに指定された方法で表示されます。

画像が表示されるまでの処理プロセスは以下の通りです。

  1. border-image-sourceで画像を読み込む
  2. border-image-sliceで、画像の外側から内側へかけて画像をスライスする距離を指定する。それによって画像が9つのイメージに分割される
  3. border-image-widthで画像スライスを表示させる太さが決まる(border-widthでボーダーが表示される領域を1px以上確保しておくこと)
  4. border-image-repeatで、画像の繰り返し方法が指定される
  5. border-image-outsetで、画像が表示される開始位置が決定され、ボーダーのイメージエリアに合わせて拡大縮小されてタイル状に敷き詰められる

border-image-sliceに与えられる値

数値
オフセット量をピクセル値で指定、ベクター図形の場合は座標値を指定する
%(パーセント)
水平方向と垂直方向のオフセット量を画像の幅と高さに対してパーセンテージで指定する
fill
要素のボックス内の背景も中心領域の画像で埋められる(初期値は非表示)

border-image-sliceの使用サンプル

今回は以下のサンプル画像を使ってボーダー画像を表示させます。

ボーダー画像のサンプル
CSS
.box_sample {
 padding: 5px;
 margin: 0 0 10px 0;
}

// パターンA
.border_A1 {
 border-style: solid;
 border-width: 30px;
 border-image: url(images/border_image.png) 30 repeat;
 border-image-width: 30px;
}
.border_A2 {
 border-style: solid;
 border-width: 30px;
 border-image-source: url(images/border_image.png);
 border-image-slice: 30;
 border-image-width: 30px;
 border-image-repeat: repeat;
}

// パターンB
.border_B1 {
 border-style: solid;
 border-width: 10px 20px;
 border-image: url(images/border_image.png) 30 15 round;
 border-image-width: 9px 15px;
}
.border_B2 {
 border-style: solid;
 border-width: 10px 20px;
 border-image-source: url(images/border_image.png);
 border-image-slice: 30 15;
 border-image-width: 9px 15px;
 border-image-repeat: round;
}

// パターンC
.border_C1 {
 border-style: solid;
 border-width: 15px 30px;
 border-image: url(images/border_image.png) 30 stretch;
 border-image-width: 15px 30px;
}
.border_C2 {
 border-style: solid;
 border-width: 15px 30px;
 border-image-source: url(images/border_image.png);
 border-image-slice: 30;
 border-image-width: 15px 30px;
 border-image-repeat: stretch;
}
HTML

パターンA
<div class="box_sample border_A1">
 border-style: solid;
 border-width: 30px;
 border-image: url(images/border_image.png) 30 repeat;
 border-image-width: 30px;
</div>

<div class="box_sample border_A2">
 border-style: solid;
 border-width: 30px;
 border-image-source: url(images/border_image.png);
 border-image-slice: 30;
 border-image-width: 30px;
 border-image-repeat: repeat;
</div>


パターンB
<div class="box_sample border_B1">
 border-style: solid;
 border-width: 10px 20px;
 border-image: url(images/border_image.png) 30 15 round;
 border-image-width: 9px 15px;
</div>

<div class="box_sample border_B2">
 border-style: solid;
 border-width: 10px 20px;
 border-image-source: url(images/border_image.png);
 border-image-slice: 30 15;
 border-image-width: 9px 15px;
 border-image-repeat: round;
</div>


パターンC
<div class="box_sample border_C1">
 border-style: solid;
 border-width: 15px 30px;
 border-image: url(images/border_image.png) 30 stretch;
 border-image-width: 15px 30px;
</div>

<div class="box_sample border_C2">
 border-style: solid;
 border-width: 15px 30px;
 border-image-source: url(images/border_image.png);
 border-image-slice: 30;
 border-image-width: 15px 30px;
 border-image-repeat: stretch;
</div>
表示確認
パターンA
border-style: solid;
border-width: 30px;
border-image: url(images/border_image.png) 30 repeat;
border-image-width: 30px;
border-style: solid;
border-width: 30px;
border-image-source: url(images/border_image.png);
border-image-slice: 30;
border-image-width: 30px;
border-image-repeat: repeat;
パターンB
border-style: solid;
border-width: 10px 20px;
border-image: url(images/border_image.png) 30 15 round;
border-image-width: 9px 15px;
border-style: solid;
border-width: 10px 20px;
border-image-source: url(images/border_image.png);
border-image-slice: 30 15;
border-image-width: 9px 15px;
border-image-repeat: round;
パターンC
border-style: solid;
border-width: 15px 30px;
border-image: url(images/border_image.png) 30 stretch;
border-image-width: 15px 30px;
border-style: solid;
border-width: 15px 30px;
border-image-source: url(images/border_image.png);
border-image-slice: 30;
border-image-width: 15px 30px;
border-image-repeat: stretch;

border-image-sliceに関連するCSSプロパティ

外枠(ボーダー・アウトライン)
border 要素の周囲にボーダー(枠線)を付ける
border-bottom 要素の底辺にボーダー(枠線)を付ける
border-bottom-color 要素の底辺に設定したボーダー(枠線)の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-bottom-width 要素の底辺に設定したボーダー(枠線)の太さを指定する
border-break ボックスが分割された場合のボーダーの表示方法を指定する
border-collapse テーブルセルのボーダーの表示の仕方を指定する
border-color 要素のボーダー(枠線)の色を指定する
border-image 要素のボーダー(枠線)に画像を指定する
border-image-outset ボーダーイメージエリアを広げる
border-image-repeat ボーダー(枠線)に指定された画像の繰り返し方法を指定する
border-image-slice ボーダー(枠線)に指定された画像の使用範囲を指定する
border-image-source ボーダー(枠線)に使用する画像ファイルを指定する
border-image-width 画像ボーダーの太さを指定する
border-left 要素の左辺にボーダー(枠線)を付ける
border-left-color 要素の左辺に設定したボーダー(枠線)の色を指定する
border-left-style 要素の左辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-left-width 要素の左辺に設定したボーダー(枠線)の太さを指定する
border-length 脚注の区切り線の長さを指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺にボーダー(枠線)を付ける
border-right-color 要素の右辺に設定したボーダー(枠線)の色を指定する
border-right-style 要素の右辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-right-width 要素の右辺に設定したボーダー(枠線)の太さを指定する
border-spacing テーブルセルのボーダーの間隔を指定する
border-style ボーダー(枠線)の種類を指定する
border-top 要素の上辺にボーダー(枠線)を付ける
border-top-color 要素の上辺に設定したボーダー(枠線)の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-top-width 要素の上辺に設定したボーダー(枠線)の太さを指定する
border-width ボーダー(枠線)の太さを指定する
outline アウトラインの表示方法をまとめて指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインのオフセット値を指定する
outline-style アウトラインのスタイルを指定する
outline-width アウトラインの太さを指定する