CSSborder-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> です。負の値は無効です。

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

<length>
境界のはみ出し量を、長さで指定します。
<number>
境界のはみ出し量を、対応する border-width に対する倍率として指定します。

形式文法

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

Example

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 にも適用されます。
継承なし
メディアvisual
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応15121511156
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? あり15 ? ? ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, unarist, Simplexible, Prinz_Rana, teoli, ethertank, sosleepy
最終更新者: mfuji09,