border-image プロパティ は，画像を使用した境界についての一括指定 をします。

指定できる値の形式（プロパティ）は，つぎのとおりです。

なお，border-image プロパティ では，境界画像の幅を指定する border-image-width は， ２つまでの値が指定可能です。　これは，境界の幅（border-width）に対しての倍数 で指定し，

1. １つも指定しない場合は，境界の幅（border-width） と同じになります。　（初期値の 1 ）
2. １つだけ指定した場合は，それが上下左右のすべての幅となります。
3. ２つ指定した場合は，それぞれ，上下と左右の幅となります。

また，border-image-outset を指定するためには， 少なくとも１つ以上の border-image-width の指定が必要です。

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

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. 中央（上下左右の中央）は，通常，境界画像の表示には使用されません。　ただし， border-image-slice で fill が指定された場合には表示されます。

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: url(star_border.png) 31 31 round;
      -moz-border-image: url(star_border.png) 31 31 round;
      -o-border-image: url(star_border.png) 31 31 round;
      -webkit-border-image: url(star_border.png) 31 31 round;   }
-->
</style>

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

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

上の例 border-image プロパティ では，Microsoft IE = Internet Explorer では，現状では境界画像を表示することはできません。 　ここまで「折角一生懸命に読んだのに」と嘆く人もいるかもしれません。　そこで，背景画像 を利用して同様の表示を得る方法を紹介しておきます。 　もちろん，この方法の場合は IE でも問題なく表示できます。

<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample2 { width: 320px; height: 140px; 
       border: solid 31px transparent;
       background: url(star_border_b.png) left top; 
       background-size: contain;
       background-origin: border-box; }
-->
</style>

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

そこで，作り方ですが，まずは，境界の画像を表示する部分も含めた要素のサイズ（この場合は 320px × 140px） の次のような画像ファイルを作成します。

言うまでもないことですが，この画像の周囲の部分が境界画像の代替部分ですので， この幅の値が 代替境界画像の幅 ＝ 境界の幅 となるように背景画像を作成します。　この例では，上下左右とも 31px の幅です。

もうひとつのポイントは，背景画像を表示する基準位置となる background-origin プロパティの値の初期値は padding-box ですので，これを boder-box に変更して，作成した画像の周辺部分がちょうど 透明（transparent）な境界線 の背後に来るようにすることです。

なお、この方法では，要素のサイズが固定していない場合（とくに縦横比が変わる場合）ではあまりうまく行きません。　また， 対象の要素毎に背景画像ファイルを作成する必要があります。　（私の場合，この例では，最初 border-image プロパティ を使って表示して，それを取り込みました。）　ですから， border-image プロパティ の代替というよりは， 境界画像を表示できないブラウザーに対する対応策と考えた方がよいかもしれません。