Naoki Otsu

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

2016-09-18

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;