概要

border-image-outset プロパティは、要素のボーダーボックスを超えて、ボーダー画像の領域を広げる量を指定します。

初期値0s
適用対象全要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く. It also applies to ::first-letter.
継承不可
メディアvisual
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* border-image-outset: sides */
border-image-outset: 1.5;

/* border-image-outset: vertical horizontal */
border-image-outset: 1 1.2;

/* border-image-outset: top horizontal bottom */
border-image-outset: 30px 2 45px;

/* border-image-outset: top right bottom left */
border-image-outset: 7px 12px 14px 5px;

border-image-repeat: inherit;

sides
<length> または <percentage> で表される量で、ボーダー画像の領域は 4 方向に、この量だけボーダーボックスを越えて広がります。
horizontal
<length> または <percentage> で表される量で、ボーダー画像の領域は横方向、left と right に、この量だけボーダーボックスを越えて広がります。
vertical
<length> または <percentage> で表される量で、ボーダー画像の領域は縦方向、top と bottom に、この量だけボーダーボックスを越えて広がります。
top
<length> または <percentage> で表される量で、ボーダー画像の領域は top 方向に、この量だけボーダーボックスを越えて広がります。
bottom
<length> または <percentage> で表される量で、ボーダー画像の領域は bottom 方向に、この量だけボーダーボックスを越えて広がります。
right
<length> または <percentage> で表される量で、ボーダー画像の領域は right 方向に、この量だけボーダーボックスを越えて広がります。
left
<length> または <percentage> で表される量で、ボーダー画像の領域は left 方向に、この量だけボーダーボックスを越えて広がります。
inherit
4 つの値すべてが、親要素の計算値から継承されることを示すキーワードです。

形式文法

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

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
border-image-outset の定義
勧告候補 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 15.0 15.0 (15.0) 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 15.0 (15.0) 未サポート ? ?

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

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