Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

border-image-width

概要

CSS の border-image-width プロパティは、ボーダーの 4 辺それぞれについて、ボーダー画像のスライスを表示する幅を決めます。幅とは、ボーダー画像領域の上下左右の各辺からの、内向きの距離を表します。

初期値1
適用対象all elements, except table elements when border-collapse is collapse. It also applies to ::first-letter.
継承不可
相対値の基準refer to the width or height of the border image area
メディアvisual
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: [ <length> | <percentage> | <number> | auto ]{1,4}
border-image-width: width                      /* One-value syntax */       E.g. border-image-width: 3;
border-image-width: horizontal vertical        /* Two-value syntax */       E.g. border-image-width: 2em 3em;
border-image-width: top vertical bottom        /* Three-value syntax */     E.g. border-image-width: 5% 15% 10%;
border-image-width: top right bottom left      /* Four-value syntax */      E.g. border-image-width: 5% 2em 10% auto;

border-image-width: inherit

 

width
ボーダー 4 辺すべての画像の幅。1-値構文でのみ使われます。
horizontal
ボーダーの横に伸びる辺、top と bottom の画像の幅。2-値構文でのみ使われます。
vertical
ボーダー縦に伸びる辺、right と left の画像の幅。2-値構文と 3-値構文でのみ使われます。
top
ボーダーの top の辺の画像の幅。3-値構文と 4-値構文でのみ使われます。
bottom
ボーダーの bottom の辺の画像の幅。3-値構文と 4-値構文でのみ使われます。
right
ボーダーの right の辺の画像の幅。4-値構文でのみ使われます。
left
ボーダーの left の辺の画像の幅。4-値構文でのみ使われます。
inherit
4 辺すべてが親要素の計算値を継承することを示すキーワードです。

<length>
画像スライスの length を表します。絶対的、相対的どちらの length も使えます。負の値であってはいけません。
<percentage>
ボーダー画像領域の高さまたは幅に対する、画像スライスのパーセンテージを表します。負の値であってはいけません。
<number>
画像スライスに、要素の border-width プロパティの計算値の何倍の大きさを使うのかを指定します。負の値であってはいけません。
auto
画像の幅または高さが、その寸法の intrinsic なサイズにならなければならないことを示します。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image-width' in that specification.
勧告候補 初回定義

ブラウザ実装状況

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

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

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