“border-image”プロパティ:画像による境界線

概要

“border-image”プロパティは境界線として使用する画像、太さ、配置方法などを指定する以下のプロパティの一括指定プロパティです。

• “border-image-source”プロパティ
• “border-image-slice”プロパティ
• “border-image-width”プロパティ
• “border-image-outset”プロパティ
• “border-image-repeat”プロパティ

“border-image”プロパティによって指定された画像は“border-style”プロパティによって指定された境界線の代わりに表示されます。

サンプルコード

値

“<'border-image-source'>”値、“<'border-image-slice'>”値、“<'border-image-width'>”値、“<'border-image-outset'>”値、“<'border-image-repeat'>”値をホワイトスペースで区切って1個ずつ指定できます。

“<'border-image-width'>”値は“<'border-image-slice'>”値の後にスラッシュ(“/”)で区切って記述します。また、“<'border-image-outset'>”値は“<'border-image-width'>”値の後にスラッシュ(“/”)で区切って記述します。

他の値を記述する順番は自由です。初期値のままで良い値は省略できます。

境界線用の画像

境界線として使用される画像は“<'border-image-slice'>”値によって指定された4本の分割線で分割され、9つの断片に分けられます。これらの断片は境界線の4個の角、その間の4辺、その中の追加の背景としてそれぞれ使用されます。

角として使用される断片はそのままそれぞれが対応する角に配置されます。

辺として使用される断片は“<'border-image-repeat'>”値によって指定された方法で、引き延ばされたり、繰り返されたりして4個の角の間に配置されます。

中央の断片は既定では破棄されて使用されませんが、“<'border-image-slice'>”値に“fill”キーワードが含まれる場合は追加の背景として境界線の内側に描画されます。

中央の断片も“<'border-image-repeat'>”値によって指定された方法で配置されます。

次項の使用例では以下の画像を境界線として使用しています。

仕様書

定義されている仕様書

border-image

<'border-image-source'>
<'border-image-slice'>
<'border-image-width'>
<'border-image-outset'>
<'border-image-repeat'>

画像による境界線を指定する

div {

border-style: solid;
border-width: 20px;
border-image: url(border-image_sample.png) 200 / 30px 20px / 10px 0 stretch round;

}

border-image: url(border-image_sample.png) 200 / 30px 20px / 10px 0 stretch round;