スマホ向けborder-imageの書き方

borderを線ではなく画像で装飾できるborder-imageプロパティ。
使うとすごく便利ですが、時々ハマります。

現状、スマホ向けでこれがベターだと思う書き方がこちら。

/*クラス名や数字は仮のものです*/
div.borderImage {
	-webkit-border-image: url(画像のパス) 12 16 16 12 stretch;
	border-image: url(画像のパス)  12 16 16 12 fill stretch;
	border-width: 12px 16px 16px 12px;
}
div.borderImage.retina {
	zoom: 0.5;
}

1. 繰り返し指定はstretchをつかう
2. ベンダープレフィックスがない方にはfillを付ける
3. Retina対応する場合は、zoom:0.5をかける

1をしないと、Androidでボーダーの内側に微妙に嫌な線が出ることがあります。
2をしないと、iOSのSafariで背景がヌケます（Androidはfillに非対応…というか自動的にfillになるらしい）。
3をしないと、Retinaディスプレイで倍角表示になります（当然、中の要素は倍サイズにする必要がある…）。