CSSborder-image-slice プロパティは border-image-source で指定された画像を複数の領域に分割します。これらの領域は境界画像の部品を構成します。

分割する過程で、4つの角、4つの辺、それに中央領域の計9つの領域を作成します。それぞれの辺からの距離で設定される4本の分割線が、領域の寸法を制御します。

The nine regions defined by the border-image or border-image-slice properties

上の図は、それぞれの領域の位置を説明しています。

  • 1-4 の領域は角の領域です。それぞれが1回ずつ使用され、最終的な境界画像の中で四隅を形成します。
  • 5-8 の領域は 辺の領域です。これらは最終的な境界画像の中で、要素の寸法に合わせて反復、拡縮、その他の加工が行なわれます。
  • 9 の領域は中央領域です。既定では描画されませんが、キーワード fill がセットされていれば背景画像のように使用されます。

border-image-repeat, border-image-width, border-image-outset の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。

構文

/* すべての辺 */
border-image-slice: 30%;

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

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

/* 上 | 右 | 下 | 左 */
border-image-slice: 7 12 14 5; 

/* `fill` キーワードの使用 */
border-image-slice: 10% fill 7 12;

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

border-image-slice プロパティは1つから4つの <number-percentage> 値を使用して指定することができます。負の値は無効です。実際の寸法よりも大きい値は 100% に丸められます。

  • 位置が1つ指定された場合、全4本の分割線がそれぞれの辺から同じ距離で作成されます。
  • 位置が2つ指定された場合、1つ目の値を上下の辺からの距離として、2つ目を左右の辺からの距離として分割線を作成します。
  • 位置が3つ指定された場合、1つ目の値をの辺からの距離として、2つ目を左右の辺からの距離、3つ目はの辺からの距離として分割線を作成します。
  • 位置が4つ指定された場合、の順(時計回り)でそれぞれの辺からの距離として分割線を作成します。

fill の値は任意で、使用する場合は、宣言のどこにおいても構いません。

<number>
縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。
<percentage>
縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。
fill
中央の画像領域を維持し、背景画像のように表示しますが、実際の background の上に重ねられます。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。

形式文法

<number-percentage>{1,4} && fill?

where
<number-percentage> = <number> | <percentage>

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-image-slice の定義
勧告候補 初回定義

初期値100%
適用対象すべての要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
パーセンテージボーダー画像のサイズ
メディア視覚
計算値1 つから 4 つのパーセンテージ値(指定値)または絶対的な長さ。指定されていれば続けてキーワード fill
アニメーションの種類個別
正規順序the percentages or lengths, eventually followed by the keyword fill

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 15Edge 完全対応 12Firefox 完全対応 15
補足
完全対応 15
補足
補足 Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
補足 Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
補足 From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
補足 Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
IE 完全対応 11Opera 完全対応 15Safari 完全対応 6WebView Android 完全対応 4.1
接頭辞付き
完全対応 4.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 15
補足
完全対応 15
補足
補足 Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
補足 Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
補足 From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
補足 Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,