最終更新日

border-image-outsetプロパティ

border-image-outsetは、ボーダーイメージエリアを広げるプロパティです。

ボーダーイメージエリアのデフォルトは、ボーダーボックスと同じ領域ですが、そこからさらに外側に広げることができます。値は1~4個指定できます。4個指定する場合は、上・右・下・左の順で記述します。値を省略した場合は、以下のように解釈されます。

4番目の値が省略された場合、2番目の値と同じ
3番目の値が省略された場合、1番目の値と同じ
2番目の値が省略された場合、1番目の値と同じ

CSS3での変更点
・border-image-outsetは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
0 すべての要素 なし
説明
長さ ボーダーイメージエリアを広げる距離を長さで指定します。
数値 border-widthの倍数を指定します。
サンプルコード
border-image-outset: 10px;
border-image-outset: 10px 10px;
border-image-outset: 10px 10px 10px;
border-image-outset: 10px 10px 10px 10px;
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME