border-image-outsetプロパティ は，境界画像領域（border image area）の拡大 を指定します。

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

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

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-outset を指定しない場合は， 境界画像領域 は 境界ボックス の範囲と一致します。

border-image-width プロパティ を指定しない場合は，境界画像の表示幅は，境界幅（border-width） となります。

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

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

上の表示結果を border-image-outset プロパティを指定しない場合（初期値の "0" の場合）の表示結果と比較してみると違いがよくわかります。

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

とくに，Safari や Google Chrome で表示すると，境界画像の表示範囲が拡大して親要素のテーブルのところまで表示されています。