border-image-slice:境界線に使用する画像を分割して角や辺に割り当てる表示範囲を指定する

初期値 100%
適用対象 全ての要素、::first-letter。ただし、border-collapsecollapseの表を除く。
継承 しない
アニメーション 計算値の型による
対応ブラウザ caniuseで確認

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

border-image-sliceは、境界線に使用する画像を分割して角や辺に割り当てる表示範囲を指定します。これはborder-image-sourceで読み込んだ画像を非破壊的に編集用の素材に仕上げる機能という意味です。

画像の上下左右の端から距離を指定して基準線を引き、4つの辺、4つの角、中心部の合計9つの領域を定義します。ここで指定された範囲が、境界線に画像を配置する祭の素材となります。

イメージスライスの説明図

値を指定する順番はtoprightbottomleftになります。4番目の値が省略された場合には、2番目の値と同じになり、3番目の値が省略された場合には、残りの2つの値が上下と左右の距離を示します。

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

境界画像に関する値を一括で指定する場合は、ショートハンド・プロパティのborder-imageを使用します。境界線に画像が表示されるまでのプロセスは以下の通りです。

  1. border-image-sourceで画像を読み込む
  2. border-image-sliceで画像を素材として扱えるように分割する
  3. border-image-widthで分割された画像を表示する幅が決まる
  4. border-image-outsetで境界線の縁からはみ出す距離が決まる
  5. border-image-repeatで画像の伸縮や並び方が決まる

border-image-sliceに指定できる値

<number>
スライスに必用な基準線を引くためのオフセット値を実数で表します。画像の場合は、縁からの距離をピクセル量で表します。ベクター画像の場合は、要素の寸法に対する相対値で座標で表します。
<percentage>
スライスに必用な基準線を引くためのオフセット値をパーセンテージで表します。画像の場合は、対象となる辺の割合で表します。ベクター画像の場合は、要素の寸法に対する相対値で割合を表します。
fill
スライスされた仮想領域の中央部分を維持するキーワードです。この値が指定された場合、要素の背景に重なるように配置します。配置の仕方はborder-image-repeatの値によって変化します。

border-image-sliceの使い方とサンプル

border-image-sliceプロパティの構文は以下の通りです。

CSS
/* 全辺共通 */
border-image-slice: 30;
border-image-slice: 30%;

/* 上下 | 左右 */
border-image-slice: 10 30;
border-image-slice: 10% 30%;

/* 上 | 左右 | 下 */
border-image-slice: 10 30 45;

/* 上 | 右 | 下 | 左 */
border-image-slice: 10 30 45 15;

/* キーワード fill の使用 */
border-image-slice: 10 fill;
border-image-slice: 10% fill 20 15;

/* グローバル値 */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: unset;

border-image-sliceの実例

それでは具体的な書き方を見てみましょう。ここでは、30pxのひし形で構成された縦横90pxの画像を使います。

ひし形のサンプル画像

今回は、この画像を境界線に表示させてスライスの値を変えた時の変化を見ていきます。全体の流れを把握したい場合は、先にborder-imageの解説を参照して下さい。

表示確認

まず初めに、境界線を表示させるための専有幅を確保します。ここでは、borderを使って関連するプロパティの値を一括指定しています。ここに先ほどの画像を読み込んでみます。

表示確認

初期状態では、読み込んだ画像をそのまま配置するだけです。これを単純に模様のサイズに従って30pxでスライスしてみましょう。

表示確認

これが画像をスライスしてパーツとして扱う機能です。もちろん、他のプロパティが初期値のため見栄えは良くありませんが、仮想的に9つに分割された画像が、各位置に配置されていることに注目して下さい。

上記の内容は、スライスしたパーツを引き伸ばして各位置に一つだけ配置している状態です。これを繰り返し表示させるタイル形式のパターンに変えてみましょう。

表示確認

これで最低限の状況が整いました。タイルの切れ目が気になる方は、border-image-repeatで整える方法を学んで下さい。以下の例ではroundを使います。

ここまでの状態でborder-image-sliceの値を変えると、どのような挙動を示すのか確認してみましょう。これはあくまで学習のためのサンプルなので、極端な値を入力します。先に小さい値との比較です。

表示確認

冒頭で紹介したオフセット値と基準線を表す解説図を思い出して下さい。30pxのひし形が並ぶ90pxの画像を15pxでスライスするとどうなるでしょうか。

30pxの場合は、ひし形が正確に切り取られて分割された素材が認識しやすいように並びます。これが15pxになると、図形の途中で分割された切れ端がパーツとして並びます。

ただし、境界線の専有幅が30pxのままであるため、画像が拡大されて分かりづらい表示になっているのです。そこで、スライスした素材に合わせて境界線の幅を15pxに変えてみます。

表示確認

元画像のひし形が、どのように分割されて、どのように配置されているのか、色を頼りに見比べてみましょう。左上のオレンジ色の図形が、左上の角に配置されているのは分かりやすいと思います。

30pxでスライスした場合は、ひし形の全容を保ったままスライスされるので、上辺の中央には紫のひし形が並びます。

しかし15pxでスライスした場合は、各辺の図形が半分、角の図形は四分の一の切れ端となります。そのため、上辺に連なる画像のパターンは、オレンジ色の切れ端と緑色の切れ端に挟まれた上半分の紫色の三角形になるのです。

今度は、極端に大きな値を入力した場合の挙動を確かめてみましょう。境界線の幅を15pxに据え置いたまま、元画像の半分のサイズをぎりぎり超えない値でスライスすると、以下のように表示されます。

表示確認

この場合、四つの基準線は中央に1pxの隙間を残して接近します。つまり、辺に使えるスライスイメージの範囲は極端に狭くなります。逆に角に配置するスライスの素材は中央の灰色のひし形を含む広いものになっています。一見すると分かりづらい挙動ですが、上下の辺には幅1pxの縦長の棒が並び、左右の辺には高さ1pxの横長の棒が並んでいるため、連続した境界線に見えているのです。

このように、スライスする値によって元画像からは考えられないような模様を表現することが可能になります。この知識はCSSスプライトなどの機能を使う時にも役立ちます。

最後に、スライスで分割された中央の素材を表示させた場合の挙動を紹介します。border-image-sliceの値にfillを加えると、それが背景の上に重なるように配置されます。

表示確認

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-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-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺に境界線を付ける
border-right-color 要素の右辺に表示する境界線の色を指定する
border-right-style 要素の右辺に表示する境界線の形状を指定する
border-right-width 要素の右辺に表示する境界線の幅を指定する
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 アウトラインの太さを指定する