CSSborder-image-width プロパティは、要素の境界画像の幅を指定します。

このプロパティの値が要素の border-width よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。

構文

/* キーワード値 */
border-image-width: auto;

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

/* <percentage> 値 */
border-image-width: 25%;

/* <number> 値 */
border-image-width: 3;

/* 上下 | 左右 */
border-image-width: 2em 3em;

/* 上 | 左右 | 下 */
border-image-width: 5% 15% 10%;

/* 上 | 右 | 下 | 左 */
border-image-width: 5% 2em 10% auto;

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

border-image-width プロパティは下記の値のリストにある1つから4つの値を使用して指定することができます。

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

<length-percentage>
境界の幅を、 <length> 又は <percentage> で指定します。パーセント値は水平オフセットにおいては境界画像の領域の、また垂直オフセットにおいては境界画像の領域の高さです。負の値であってはいけません。
<number>
境界の幅を、対応する border-width に対する倍率として指定します。負の値であってはいけません。
auto
境界の幅が、対応する border-image-slice の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する border-width が代わりに使用されます。

形式文法

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

where
<length-percentage> = <length> | <percentage>

この例は以下の90×90ピクセルの ".png" ファイルを使用して境界画像を作成します。

そして、元の画像内のそれぞれの円は30×30ピクセルです。

HTML

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
   no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

CSS

p {
  border: 20px solid;
  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

結果

仕様策定状況

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

初期値1
適用対象全要素。ただし border-collapsecollapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
パーセンテージrefer to the width or height of the border image area
メディアvisual
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

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

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

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