こんにちは、今年は風邪を一回もひいていないともよーんです。
このまま冬が終わるまで貫けるか！？

今回はborderを画像で作れてしまうcssプロパティ、border-imageをご紹介いたします。
つい先日、とある案件でshiovo先輩が作ったデモを見せてもらい、そこで初めて知り調べてみました。

利点としては、以下の2点が挙げられます。
★1枚の画像で9スライスのデザインが実現できる
★borderを付ける要素のネストは不要

いつもちょっと凝った背景を可変にするために、コンテンツを3つのdivで囲んで、真ん中・上・下用の画像を背景で指定していました。それに比べると、border-imageを使うと格段にシンプルなソースになります。
欠点は、IE8以下には適用できないこと。
ですので、残念ながら現実的にはスマートフォンサイトのみでの使用になりそうですが、それでも大きな進化です。

では、具体的に指定内容を見ていきましょう。
border-imageには以下の個別プロパティが存在します。

border-image-source: url(border.png); /* ボーダーに使用する画像を指定 */
border-image-slice: 15px 15px 15px 15px; /* スライスする位置までの距離を指定 */
border-image-width: 15px; /* 画像ボーダーの太さを指定 */
border-image-repeat: repeat; /* 画像の繰り返し方法を指定 */

スライスする位置までの距離は①→②→③→④と時計回りに指定します。

さてさて、仕組みをざっと理解したら、百聞は一見にしかず、
ジェネレーターサイトでいろいろデモって遊んでみましょう。
border-image-generator

上ではそれぞれの意味を説明するために個別プロパティをご紹介しましたが、実は個別のプロパティに対応しているブラウザはなく、border-imageプロパティに対してまとめて指定する形になります。
次回は具体的な記述方法をお伝えします。