border-imageをRetina対応させるときの備忘録

border-image を使う時は、 http://border-image.com/ を使って CSS ソースを生成して貼り付ける事が多いのですが、 こちらで生成される CSS は Retina 対応してない素の画像サイズなので、 スマホ制作してる時とかは画像が大きくなってしまいます。

Retina 対応させる方法

Retina 対応する場合は、border-imageの数値は変えずに、 border-widthの値だけ、1/2 とかにすると良いので、 例えば、こうなっていたら ↓

border-width: 36px 40px 40px 44px;

こうすると良かったです ↓

border-width: 18px 20px 20px 22px;