borderで背景画像を表示する border-image

border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。

残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという印象。プログレッシブエンハンスメントを適用してうまく見せるのは結構難しそうだなー、という感触。
とはいえせっかく調査したので備忘録。
border-image を使ったサンプル

仕様

border-image-source

none（初期値）/ url(画像パス)

border-image-slice

100％（初期値）/ 数値 / ○○% / 数値 fill / ○○% fill

border-image-width

1（初期値）/ ○○px / ○○% / auto

border-image-outset

0（初期値）/ 数値? px?

border-image-repeat

stretch（初期値）/ repeat / round / space

一気書き

border-image

{ border-image-source } { border-image-slice } / { border-image-width } / { border-image-outset } { border-image-repeat }

現段階（2011年4月20日現在）で試して気になった点

• 必須は、border-image-source と border-image-slice と border-image-width。
  border-image-widthは、border-widthで代用できる。
• 個別にプロパティとその値を指定しても（たとえば、border-image-source:url(xxx.png);border-image-slice:xx; のような）適用されないため、border-image として一気に指定する必要がある。
• border-image-outsetは現段階で対応するブラウザはないばかりか、指定するとborder-imageが無効になるので指定しないよう気をつける（実際、border-image-outsetの効果は未確認）。
• Opera 11.10 では、border-image-repeatを指定するときは、border-image-widthの指定は4方向（上 右 下 左）指定する必要がある。
• プリフィックスを付けないと対応しない（対応確認ブラウザは本記事下参照）。

これらを踏まえると border-image の指定方法は以下。

スマートフォン（iPhone, Android）限定なら

というわけで、背景画像を用意してサンプル。

サンプル

サンプルサンプルサンプルサンプル

html

<div class="sample">サンプルサンプルサンプルサンプル</div>

css

.sample{
display:inline-block;
line-height:40px;
color:#fff;
border-image: url(/img/markup/css_border_image_arrow.png) 23 82 23 26 / 23px 82px 23px 26px;
-moz-border-image: url(/img/markup/css_border_image_arrow.png) 23 82 23 26 / 23px 82px 23px 26px;
-webkit-border-image: url(/img/markup/css_border_image_arrow.png) 23 82 23 26 / 23px 82px 23px 26px;
-o-border-image: url(/img/markup/css_border_image_arrow.png) 23 82 23 26 / 23px 82px 23px 26px;
}

これは便利！！！

いろいろテストしました。実際にソースと見比べながらのほうがイメージ掴めます。
border-image を使ったサンプル