【CSS3】 border-image を試してみた。

先日、CSS3入門の手始めとして、border-radius使ってみた。今日はその続き。border-image を試してみる。

border-imageborder-radius と同様、CSS3の新しいプロパティで、ボーダーに画像を適用する。「ボーダーに画像」というのがいまいちピンとこなかったのだが、使ってみるとこれはなんとも便利だ。

デモページはこちら

今回は素材として画像を使うが、適当な画像ではちょっとわかりにくいと思ったので、なるべくわかりやすいサンプル画像を用意した。

素材として使用する画像

基本的な使い方

基本的な使い方は次のようにする。

.borderimg01{
	border-image:         url("border-image.gif") 40 / 40px stretch;
	-moz-border-image:    url("border-image.gif") 40 / 40px stretch;
	-webkit-border-image: url("border-image.gif") 40 / 40px stretch;
	-o-border-image:      url("border-image.gif") 40 / 40px stretch;
	-ms-border-image:     url("border-image.gif") 40 / 40px stretch;
}

実験結果画像1
Firefoxで表示した図

前回同様、一応、主要ブラウザのベンダープレフィックスをつけているが、現在はFirefox と WebKit系しか対応していないようだ。

書式は次のようになっている。

border-image:
    url({$border-image-source})
    {$border-image-slice} / {$border-width}
    {$border-image-repeat}
;

{$border-image-source} で指定した画像1枚でボーダー画像を表現する。ボーダー画像というので、上下左右の辺と4隅で8枚必要なんじゃないかと想像していたが違うようだ。

この画像の端っこから何ピクセル分をボーダーとして使用するかを指定しているのが {$border-image-slice}。上下左右から指定サイズが切り取られ、あまった中央部分が背景として使われる。

{$border-width} は、border-width プロパティと同じく実際のボーダーの太さ。

それから最後の {$border-image-repeat} には、stretch (伸縮)と repeat (繰り返し)などが選択できる。

背景色と組み合わせてみる実験

.borderimg02{
	border-image:         url("border-image.gif") 40 / 40px stretch;
	-moz-border-image:    url("border-image.gif") 40 / 40px stretch;
	-webkit-border-image: url("border-image.gif") 40 / 40px stretch;
	-o-border-image:      url("border-image.gif") 40 / 40px stretch;
	-ms-border-image:     url("border-image.gif") 40 / 40px stretch;
	background-color:#ffdddd;
}

実験結果画像2
Firefoxで表示した図

背景色(backgroun-color)は、border-image の後ろに隠れてしまって見えなくなった。border-image に対応していない古いブラウザや、画像を表示しない設定のブラウザのために、背景色も指定しておいた方がよいかも知れない。

ボーダーと組み合わせてみる実験

.borderimg03{
	border-image:         url("border-image.gif") 40 / 40px stretch;
	-moz-border-image:    url("border-image.gif") 40 / 40px stretch;
	-webkit-border-image: url("border-image.gif") 40 / 40px stretch;
	-o-border-image:      url("border-image.gif") 40 / 40px stretch;
	-ms-border-image:     url("border-image.gif") 40 / 40px stretch;
	border:5px solid #000000;
}

実験結果画像3(Safariで表示)
Safariで表示した図

実験結果画像3(Firefoxで表示)
Firefoxで表示した図

従来の普通のボーダーと組み合わせてみたところ、border-image の方が優先されるようだ。border-image に対応していない古いブラウザや、画像を表示しない設定のブラウザのために、普通のボーダーも一緒に指定しておいた方がよいかも知れない。

ただし、ボーダーの太さは、WebKitでは border の指定が有効になったが、Firefoxは border-image の指定の方が採用された。そのへんの解釈にぶれがあるようなので注意が必要。

4つの数値を変えてみる実験

{$border-image-slice}{$border-width} の指定は、他のさまざまなプロパティと同様に、上右下左の順で値を個別に指定することができる。{$border-image-repeat} は、縦横の順。

.borderimg04{
	border-image:         url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
	-moz-border-image:    url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
	-webkit-border-image: url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
	-o-border-image:      url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
	-ms-border-image:     url("border-image.gif") 10 20 30 40 / 10px 20px 30px 40px repeat stretch;
}

実験結果画像4
Firefoxで表示した図

  • ※この例では、ボーダーの領域を判別しやすくするために、コンテンツ領域にのみ背景色をつけています。

まとめ

これはすごく便利なプロパティだと思う。前回試した border-radius よりも、角丸ボックスとしての表現力は高いし、ボーダーをゼロにすれば伸縮可能な背景画像のような使い方もできそう。上手く使えば、かつてない新しい表現のアイデアがまだまだ出てきそうな、そういう可能性を感じる。

今回の実験に使ったデモページこちらからダウンロード

今回の実験に使ったブラウザのバージョンは下記の通り。

Internet Explorer 8 ×
Firefox 3.5.5
Safari 4.0.4
Google Chrome 3.0.195.38
Opera 10.53
  • ※Opera 10.53 では、『4つの数値を変えてみる実験』の場合のみ有効。

プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

ページの先頭へ戻る