最終更新日 2021年4月7日

border-image-sliceプロパティ

border-image-sliceは、画像の分割位置を指定するプロパティです。1～4個の値で指定し、それぞれの値は半角スペースで区切ります。

4つの値はそれぞれ、画像の上端、右端、下端、左端からの距離を指定します。

・値を3個のみ指定した場合、4個目は2個目と同じ値を示す
・値を2個のみ指定した場合、3個目は1個目と同じ値を示す
・値を1個のみ指定した場合、4個の値はすべて同じ値を示す

値は、「パーセント値」または「数値」で指定します。パーセント値の場合は、画像全体の幅または高さに対する割合を「%」を付けて指定します。数値の場合は、ピクセル数を「px」を付けずに数字のみで指定します。なお、ベクター画像の場合は数値としてベクター座標を指定することもできます。

border-image-sliceを指定することで、画像は9つの区画に分割され、分割された中央部分の画像は破棄されます。しかし、パーセント値/数値の値に加えキーワード「fill」を指定すると、中央部分も破棄されずに、画像が表示されます。

ボーダー画像関連プロパティの値をまとめて指定するには、border-imageを使用します。

CSS3での変更点

・border-image-sliceは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
100%	すべての要素	なし

値	説明
数値	画像の端からの距離を、「ピクセル数（単位なし）」や「ベクター座標」で指定します。
パーセント値	画像全体の幅や高さに対する割合で指定します。
fill	スライス後の画像の中央部分が破棄されません。

サンプルコード

border-image-slice: 10;
border-image-slice: 10 10;
border-image-slice: 10 10 10;
border-image-slice: 10 10 10 10;

border-image-slice: 10%;
border-image-slice: 10% 10%;
border-image-slice: 10% 10% 10%;
border-image-slice: 10% 10% 10% 10%;

border-image-slice: 10 fill;
border-image-slice: 10% fill;

参考文献：CSS Backgrounds and Borders Module Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。