仕様

border-image-slice[ <number[0,∞]> | <percentage[0,∞]> ]{1,4} && fill?
一括/個別個別指定プロパティ
初期値100%
適用対象すべての要素 (border-collapseが折りたたまれている場合を除く)
継承なし
百分率ボーダー画像のサイズを参照
計算値それぞれ数値またはパーセンテージの4つの値。加えて、指定されている場合はfillキーワード

border-image-slice プロパティは、border-image-source で指定された画像の上端、右端、下端、左端からの内向きのオフセットを指定し、4つの角、4つの端、中央の9つの領域に分割する個別指定プロパティです。
非継承プロパティで、初期値は 100% なので、省略時は 100% が指定値となります。

border-image-slice値で指定された領域は重複する場合があります。ただし、左右の幅の合計が画像の幅以上の場合、上端と下端、および中央部分の画像は空になります。これは、空でない透明な画像があった場合と同じ効果があります。

値の数

  1. cdvSample820 > div { padding: 1em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-width: 1; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample820">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-slice は非継承プロパティであり初期値は 100% なので、border-image-slice: 100%; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-slice: 8 12 16 20;

値を４つ指定しました。値は 上，右，下，左 でそれぞれの辺からの距離として分割線を作成します。

例
  1. border-image-slice: 8 12 16;

値を３つ指定しました。値は 上，左右，下 でそれぞれの辺からの距離として分割線を作成します。

例
  1. border-image-slice: 8 12;

値を２つ指定しました。値は 上下，左右 でそれぞれの辺からの距離として分割線を作成します。

例
  1. border-image-slice: 8;

値を１つ指定しました。値は 上下左右 でそれぞれの辺からの距離として分割線を作成します。

例

<number> 値

  1. cdvSample820 > div { padding: 1em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-width: 1; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample820">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-slice は非継承プロパティであり初期値は 100% なので、border-image-slice: 100%; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-slice: 16;

ラスター画像のピクセル数値を指定しました。

例

<percentage> 値

  1. cdvSample820 > div { padding: 1em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-width: 1; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample820">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-slice は非継承プロパティであり初期値は 100% なので、border-image-slice: 100%; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-slice: 33%;

単位 % の値を指定しました。% は、元の画像の寸法に対する割合です。

例

キーワード

  1. cdvSample820 > div { padding: 1em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-width: 1; border-image-outset: 0; border-image-repeat: stretch; }
  1. <div class="cdvSample820">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
この雛型のままだと、border-image-slice は非継承プロパティであり初期値は 100% なので、border-image-slice: 100%; と記述しているのと同じ結果となります。

Original image
例
  1. border-image-slice: 33% fill;

キーワード fill を指定しました。fill は、中央の画像領域を維持し、背景画像のように表示します。

例

CSS全体のキーワード

  1. cdvSample860 > div,
  2. cdvSample860 > div > div { padding: 1em; outline: solid 1px; border: solid 1em; border-image-source: url(./sample.png); border-image-width: 1; border-image-outset: 0; border-image-repeat: stretch; }
  3. cdvSample860 > div { border-image-slice: 33%; }
  1. <div class="cdvSample860">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素の境界の記述は、継承の確認の為に記述しています。

Original image
親
子
  1. border-image-slice: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. border-image-slice: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。border-image-slice プロパティの初期値は 100% です。

親
子
  1. border-image-slice: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。border-image-slice プロパティは非継承プロパティなので初期値の 100% を設定します。

親
子