border-image-outset

border-image-outsetCSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。

境界画像のうち、 border-image-outset によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントをキャプチャしたりすることはありません。

構文

/* <length> 値 */
border-image-outset: 1rem;

/* <number> 値 */
border-image-outset: 1.5;

/* 上下 | 左右 */
border-image-outset: 1 1.2;

/* 上 | 左右 | 下 */
border-image-outset: 30px 2 45px;

/* 上 | 右 | 下 | 左 */
border-image-outset: 7px 12px 14px 5px;

/* グローバル値 */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: unset;

border-image-outset プロパティは、1つから4つの値を使用して指定することができます。それぞれの値は <length> 又は <number> です。負の値は無効であり、指定すると border-image-outset の宣言が無効になります。

  1. 値が1つ指定された場合は、全4辺に適用されます。
  2. 値が2つ指定された場合は、1つ目が上下に、2つ目が左右に適用されます。
  3. 値が3つ指定された場合は、1つ目がに、2つ目が左右に、3つ目がに適用されます。
  4. 値が4つ指定された場合は、の順 (時計回り) で適用されます。

<length>
border-image がはみ出す寸法を長さ — 数値と単位で指定します。
<number>
border-image がはみ出す寸法を、要素の対応する border-width の倍数で指定します。例えば、要素が border-width: 1em 2px 0 1.5rem で、 border-image-outset: 2 であると、最終的な border-image-outset2em 4px 0 3rem として計算されます。

形式文法

[ <length> | <number> ]{1,4}

HTML

<div id="outset">This element has an outset border image!</div>

CSS

#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5;  /* 1.5 × 1.4rem = 2.1rem */
  margin: 2.1rem;
}

結果

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-image-outset の定義
勧告候補 初回定義
初期値0
適用対象すべての要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
メディア視覚
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類by computed value type
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-image-outsetChrome 完全対応 15Edge 完全対応 12Firefox 完全対応 15IE 完全対応 11Opera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 15Opera Android ? Safari iOS 完全対応 6Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明