CSS3のborder-imageを使って画像ボーダーをつくる方法

Web制作

2016年09月02日

CSS3プロパティの連載記事

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つの例をご紹介します。

使用する画像素材

具体例1

下の例では、パターン素材を使ってボーダーを表示しています。border-image-repeatでroundを指定して、タイル状に画像を敷き詰めています。

border-image: url(border-sample.png) 27 round;

具体例1

具体例2

今度は、border-image-repeatでstretchを指定しています。roundの場合と異なり、画像が引き伸ばされて表示されている様子がわかります。

border-image: url(border-sample.png) 27 stretch;

具体例2

あとがき

border-imageプロパティの使い方と具体例についてご紹介しました。ブラウザから使える、border-imageのジェネレーターも多くあります。併せて活用していくと、デザインの幅が広がるのでオススメです。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。