border-imageのメモ

サポート状況

まず前提として、スマホ以外では使わないほうが無難。
IE10もまだサポートしないのでタブレットも危ない。

サポート状況は caniuse などを参考に。

記述

古いiOSやAndroidではショートハンドでしか効かなかったり、逆にborder-widthを含めると効かなかったり、順番の問題だったり、色々とあるので一部ショートハンド + border-width が今のところ安全。

selector {
    /* 画像パス スライス リピート の順であれば安全 */
    border-image: url(hoge.png) 1 1 1 1 stretch;
    /* ボーダーの太さは別に記述する */
    border-width: 5px 5px 5px 5px;
}

クロスブラウザ

例のごとくベンダープレフィックスが必要。

そしてここでひとつポイントがあって、画像の中央（コンテンツボックス部分）を表示するかどうかのfillキーワードが、Android4などでは対応しておらず記述してはいけない。記述しなくてもデフォルトで画像の中央は表示されるので、それは問題はない。

しかし、プレフィックスなしのborder-imageで記述する場合、デフォルトではW3Cの仕様に従いfillキーワードを記述しないと中央が表示されなくなってしまう。

つまり

selector {
    -webkit-border-image: url(hoge.png) 1 1 1 1 stretch; /* デフォルトでfillの状態 */
    image-border: url(hoge.png) 1 1 1 1 fill stretch; /* fillを入れないと反映されない */
}

と記述必要がある。

※-webkit-をサポートしている限りはこれだけを記述しておけば間違いはないが、いつサポートが終了するかはわからないので極力プレフィックスなしの記述も加えておく。

まとめ

現在の段階ではこう書いておいたほうがいい。

selector {
    -webkit-border-image: url(hoge.png) 1 1 1 1 stretch;
       -moz-border-image: url(hoge.png) 1 1 1 1 stretch;
         -o-border-image: url(hoge.png) 1 1 1 1 stretch;
            border-image: url(hoge.png) 1 1 1 1 fill stretch;
    border-width: 5px 5px 5px 5px;
}