Retina Display向け.5pxのborderまとめ

Retina Display向けCss小数点の扱いについて

Macbook ProやiPhoneなどRetina Displayで.5pxのborderでStyle定義すると綺麗な線が表現できます。

Macbook ProやiPhoneなどRetina Displayで.5pxのborderを表示しながら、非Retina向けには1pxのborderを敷きたい場合、以下の方法pxを指定するとRetina/非Retinaどちらとも1コードで対応可能です。

.hoge{
  border-bottom: .99px solid #eee;
}

こちらは以下のブラウザのみ.5pxに表示されます。それ以外は通常の1pxとなります。

対応ブラウザ

• Safari
• iOS Safari
• Firefox

Chrome, Operaについては1pxで表示されます。ちなみに.98pxではSafariやiPhoneでも1px表示になってしまいます。
すべて最新版のみ確認しています。古いバージョンについては1pxで表示されるようです。

ちなみに、

.hoge{
  border-bottom: .5px solid #eee;
}

とするとChromeとOperaではborderが0pxと同じ扱いになり表示されなくなるので気をつけましょう。とくに以下のようにpixel-ratioで高解像度向けのStyleを定義する際に、

@media screen and (-webkit-min-device-pixel-ratio: 2){
  div{
    border-width: .5px;
  }
}

としてしまうと、Android ChromeやRetina DisplayのMacbook pro Chromeなどでborderが消えてしまいます…。
この辺りpixel計算がデバイス・ブラウザによって異なるための現象だと思いますが、詳しくはこちらの記事などが参考になると思います。

• いまさら聞けないRetina対応のための「ピクセル」の話

追記1:

border-radiusやborder-style:dottedを使うと.5pxのborderはどのブラウザでも1pxになってしまいます。
border-radiusの時は、box-shadowを代用することで.5pxが実現できます。dottedについては諦めて、そのつもりでデザインすることをお勧めします。

追記2:

Desktop Safariでみると.99pxのままだと逆にborderが0px扱いになるようでした。この場合、以下のようにしておくと良いです。

@media screen and (-webkit-min-device-pixel-ratio: 1){
  div, button, li, aside, header, main, section{
    border-width: 1px;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
  div, button, li, aside, header, main, section{
    border-width: .99px;
  }
}