CSS3：border-image-outsetプロパティ

名前	`border-image-outset`
値	[<length[0,∞]> \| <number[0,∞]>]{1,4}
初期値	0
適用対象	すべての要素 ─ ただし、［border-collapse が collapse にされた table における、内部 table 要素］を除く。
継承	されない
百分率	受容しない
算出値	4 個の値 ─ 各値は［実数／絶対長さ］
アニメーション型	算出値の型による

BorderImage9.png：

（横20px×3列、縦20px×3行。透過）

指定された長さによる外方へのオフセットを表現する。

（空白）

開始<span style="
 border:30px solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-repeat:round;
 border-image-slice:20;
 border-image-width:20px;
 border-image-outset:2mm;
">テスト</span>終了

width、heightが効かない

開始<DIV style="width:100px; height:70px;
 border:30px solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-repeat:round;
 border-image-slice:20;
 border-image-width:20px;
 border-image-outset:20px;
">テスト</DIV>終了

<number[0,∞]> ○

対応する border-＊-width の算出値の、指定された倍数による外方へのオフセットを表現する。

開始<DIV style="width:100px; height:70px;
 border:30px solid;
 border-image-source:url(Com/BorderImage9.png);
 border-image-repeat:round;
 border-image-slice:20;
 border-image-width:20px;
 border-image-outset:0;
">テスト</DIV>終了

ボーダー画像の［ボーダーボックスの外側に描画される部分］からスクロール動作が誘発されることはない。その部分は、mouse イベントからは見えないものとされ、当の要素のためにイベントを捕捉することもない。

注記：画像が外方へオフセットされても、決してスクロール動作を誘発させないが、依然として先祖や表示域の外側で切り取られ得る。

スクリプト：

スクリプト：