最終更新日 2021年4月7日

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;

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。