borderに1px以下も設定可能だって知ってました？border:0.5pxはRetinaディスプレイで表示される
このブログではアフィリエイト・アドセンス広告を利用しています
当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。
Web黎明期からHTMLとCSSを書き続けて四半世紀ぐらい経過してるのですが、知らないことの連続で😭
特にCSSは次々とプロパティが増えて、キャッチアップしきれないですよね。
最近お仕事をしていて衝撃的だったのが、CSSでborderに小数点の数値を設定できるということです。
ご存知でした？
私は全く知らなかったのです・・・無知ゆえに
「またデザイナーが小数点設定しやがって！」と悪態ついてしまうところでした。あぶない。
目次（読みたいところへジャンプ！）
低解像度ディスプレイとRetinaディスプレイでは0.5pxの見え方が異なる
結論から言いますね。
borderに0.5pxを指定すると、高解像度のRetinaディスプレイでは線がちゃんと細く表示されるのです！
低解像度ディスプレイの場合には、1pxと0.5pxの表示幅に違いが発生しませんでした。おそらく四捨五入されてしまうのでしょうか。
実際に実験してみましょう。
0.4px〜2pxの線で囲んだボックスを並べてみました。
どう見えていますか？
このボックスは0.4pxの線を指定しています。
このボックスは0.5pxの線を指定しています。
このボックスは0.9pxの線を指定しています。
このボックスは1pxの線を指定しています。
このボックスは1.5pxの線を指定しています。
このボックスは2pxの線を指定しています。
Retinaディスプレイ（M2 Mac book Air）で見た場合には、0.5px・1px・1.5px・2pxの線に違いがありました。ちゃんと0.5pxを正しく表現してくれています。
一方、0.4pxや0.9pxは、0.5pxと変わらない太さでの表示でした。
iPhone 14で見てみると、なんと！どういうことでしょう！
0.9pxまでも再現できちゃってますよ！0.5pxより太く1pxより細い線が表示されています。
未だPCディスプレイの主流はフルHDでRetinaではありませんが、iPhoneもAndroidもスマホはピクセル密度2倍な機器のユーザー多数なので、より細やかな線が使いたい時は0.5px指定も選択肢としてありかもしれません。
ただ、機器にかなり左右されてしまうので、さすがに0.9pxや0.4pxを使用するのは危険だと感じました。
