CSSリファレンス

border-image-widthの意味と使い方

「border-image-width」は画像を使ったボーダーの幅を指定します。4辺の幅を、それぞれボーダー画像領域の上辺、右辺、下辺、左辺からの距離で指定します。値が1つの時は4つの距離すべてに適用されます。

値の指定方法

実数値+単位

各辺からの距離を、数値に単位を付けて指定します。


パーセント値+%

各辺からの距離を、ボーダー画像領域に対する割合で指定します。左右の距離は幅を、上下の距離は高さを基準とします。


数値

各辺からの距離を、border-widthプロパティに指定した対応するボーダー幅の倍数で指定します。


auto

border-image-sliceプロパティに指定した値と同じになります。border-image-sliceプロパティの値がない場合は、border-widthプロパティの値が使用されます。


関連プロパティ

  • border-image-slice:ボーダーに使用する画像の分割位置を指定する
  • border-image-outset:ボーダー画像の領域を広げる
  • border-image-repeat:ボーダー画像の繰り返し方法を指定する