CSS3 border-image-outset プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

例

要素のボーダーの外側 10 ピクセルにボーダー画像を配置します：

#borderimg {
    border-image-source: url(border.png);
    border-image-outset: 10px;
}

定義と用法

border-image-outset プロパティは、ボーダーボックスの外側に拡張するボーダー画像領域の量を指定します。

チップ: border-image (全ての border-image-* プロパティを設定するためのショートハンド・プロパティ) プロパティもご覧ください。

デフォルト値： 0
継承： 継承する
アニメーション可否： 不可。animatable を参照
バージョン： CSS3
JavaScript 構文： object.style.borderImageOutset="10px" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
border-image-outset 15.0 11.0 15.0 6.0 15.0

CSS 構文

border-image-outset: length|number|initial|inherit;

注: border-image-outset プロパティには、1 ～ 4 個の値（上、右、下、左サイド）を設定します。 4 番目の値（左）を省略した場合は、2 番目の値（右）と同じになります。3 番目の値（下）も省略した場合は、最初の値（上）と同じになります。 2 番目の値（右）も省略した場合は、最初の値（上）と同じになります。

プロパティの値

値 説明 Play it
length 端から border-image がどれくらい離れて表示するかを指定する長さの単位。デフォルトは 0 です Play it ❯
number 対応する border-width の倍数を表わします Play it ❯
initial プロパティにデフォルト値を設定します。initial を参照 Play it ❯
inherit このプロパティは親要素を継承します。inherit を参照

関連ページ

CSS3 チュートリアル：CSS3 Border Images

CSSリファレンス：border-image プロパティ

CSSリファレンス：border-image-repeat プロパティ

CSSリファレンス：border-image-slice プロパティ

CSSリファレンス：border-image-source プロパティ

CSSリファレンス：border-image-width プロパティ

HTML DOM リファレンス：borderImageOutset プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯