CSS3のプロパティについて解説する連載です。今回はborder-imageについてご紹介します。
border-imageの指定方法
border-imageを使うと、画像を使って要素のボーダー（枠線）を指定することができます。border-imageでは、次の5つのプロパティを指定することができます。
| border-image-source | ボーダーとして使用する画像ファイルを指定します。初期値はnoneです。 |
|---|---|
| border-image-slice | ボーダーとして使用する、画像の範囲を指定します。初期値は100％です。 |
| border-image-width | ボーダーの幅を指定します。初期値は1です。 |
| border-image-outset | ボーダーを表示するエリアを広げます。初期値は0です。 |
| border-image-repeat | 画像の繰り返し方法を指定します。初期値はstretchです。 |
下のように、この5つのプロパティ値を記述すればOKです。記述をしなかったプロパティについては、初期値が設定されます。
border-image: （border-image-source） （border-image-slice） （border-image-width） （border-image-outset） （border-image-repeat）;
border-imageの具体例
それでは、border-imageの具体例を見ていきましょう。ここでは例として、下の画像素材を使って、2つの例をご紹介します。
具体例１
下の例では、パターン素材を使ってボーダーを表示しています。border-image-repeatでroundを指定して、タイル状に画像を敷き詰めています。
border-image: url(border-sample.png) 27 round;
具体例２
今度は、border-image-repeatでstretchを指定しています。roundの場合と異なり、画像が引き伸ばされて表示されている様子がわかります。
border-image: url(border-sample.png) 27 stretch;
あとがき
border-imageプロパティの使い方と具体例についてご紹介しました。ブラウザから使える、border-imageのジェネレーターも多くあります。併せて活用していくと、デザインの幅が広がるのでオススメです。