border-image-sliceプロパティ は，画像を分割して境界の各位置への割り当て を指定します。

指定できる値は，つぎのとおりです。

上の値 ～ 左の値 は半角ブランクを挟んでこのうち４つまで指定できます。

1. 指定する値の個数にかかわらず，値の順序は，最初から， 上の値 → 右の値 → 下の値 → 左の値 と決まっています。　（上から時計回り）
2. 値を３つ指定した場合は，省略された 左の値 は 右の値 と同じになります。　
3. 値を２つ指定した場合は，さらに，省略された 下の値 は 上の値 と同じになります。
4. 値を１つだけしか指定しない場合は，それが 上下左右すべての値になります。

境界に画像を表示するためには，

1. border プロパティ などを用いて，境界画像を表示する要素の 境界領域を確保 する。
   （border-style は solid， border-color は transparent とする。 　また，border-width で，境界画像を表示する 幅 を指定する。）
2. border-image プロパティ などの指定により，境界画像のファイル（border-image-source）， 境界画像の表示に使う部分（border-image-slice）などを指定する。

この border-image-slice では，画像の上端，右端，下端，左端からのオフセットを指定して， 画像を水平，垂直，それぞれ２本ずつの直線で９つの部分（左上，上中央，右上，右中央，右下，下中央，左下，左中央，中央）に分割します。 　境界でのこれら９つの部分の表示の位置や方法は，次の表に示すとおりです。

1. 左上，右上，右下，左下は，元の画像と同様に４つのコーナーに表示されて，繰り返しはありません。
2. 上中央，右中央，下中央，左中央の部分は角の部分を除いた 辺 の部分を埋める画像として使われます。
   これらについては，border-image-repeat の値が， stretch 以外の場合には，画像が繰り返して表示されます。
3. 中央（上下左右の中央）は，通常，境界画像の表示には使用されません。　ただし， fill が指定された場合には表示されます。

左の値 と 右の値 の和が画像の幅（100%） 以上になる場合は，上中央 と下中央 には画像が割り当てられません。　同様に， 上の値 と 下の値 の和が画像の高さ（100%） 以上になる場合は，左中央 と右中央 には画像が割り当てられません。

border-image-outset を指定ない場合には， 上の表の配置基準の 境界画像領域（border image area）は 境界ボックス と一致します。 　 border-image-outset の指定によって，その外側まで含めたより広い領域（親要素や隣接要素の領域も含む） とできて， その範囲まで画像による境界を表示することができます。

<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample1 { width: 320px; height: 140px; 
      border: solid 31px transparent;
      border-image-source: url(star_border.png);
      border-image-slice: 31;
      border-image-repeat: round;
      -moz-border-image-source: url(star_border.png);
      -moz-border-image-slice: 31;
      -moz-border-image-repeat: round;
      -webkit-border-image-source: url(star_border.png);
      -webkit-border-image-slice: 31;
      -webkit-border-image-repeat: round; 
      -o-border-image: url(star_border.png) 31 round; }
-->
</style>

<div class="sample1">
   これが class=&quot;sample1&quot; の部分です。
</div>

ただし，Opera では正常に表示できないため，同等の border-image による一括指定 に置き換えてあります。

なお，この例で境界画像として用いたのは，

上の 注意１ に述べたように， 左右，上下ともオフセット値の和が画像の幅や高さを超えると，それぞれ， 上中央と下中央，左中央と右中央には画像が表示されなくなります。

たとえば，

<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample2 { width: 320px; height: 140px; 
      border: solid 52px transparent;
      border-image-source: url(bubble.png);
      border-image-slice: 100%;
      -moz-border-image-source: url(bubble.png);
      -moz-border-image-slice: 100%;
      -webkit-border-image-source: url(bubble.png);
      -webkit-border-image-slice: 100%;
      -o-border-image: url(bubble.png) 100%; }
-->
</style>

<div class="sample2">
   これが class=&quot;sample2&quot; の部分です。
</div>

このように，左上，右上，右下，左下には元の画像がそのまま表示されますが，それ以外の境界部分には何も表示されません。

ただし，Opera では正常に表示できないため，同等の border-image による一括指定 に置き換えてあります。