CSSリファレンス

border-imageの意味と使い方

「border-image」は画像を使ったボーダーの設定を一括して指定できます。border-image-width、border-image-outsetプロパティの値は、この順番で「/」に続けて、他の値は半角スペースで区切って指定します。省略した値については初期値が適用されます。

値の指定方法

border-image-source

画像のURLを指定する。


border-image-slice

画像を分割する位置を指定する。


border-image-width

ボーダー画像の幅を指定する。


border-image-outset

ボーター画像領域を広げる距離を指定する。


border-image-repeat

ボーダー画像の繰り返し方法を指定する。


関連プロパティ

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