border-image-outset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

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

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

試してみましょう

構文

css
/* <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: revert;
border-image-outset: revert-layer;
border-image-outset: unset;

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

  1. 値が 1 つ指定された場合は、全四辺に適用されます。
  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 として計算されます。

公式定義

初期値0
適用対象すべての要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
計算値指定通り。ただし相対的な長さはは絶対的な長さに変換される
アニメーションの種類計算値の型による

形式文法

border-image-outset = 
[ <length [0,∞]> | <number [0,∞]> ]{1,4}

境界画像をはみ出させる

HTML

html
<div id="outset">この要素の境界画像ははみ出しています。</div>

CSS

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;
}

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-outset

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-image-outset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報