More than 5 years have passed since last update.

0.5pxのborder

Last updated at 2018-05-14Posted at 2018-05-07

Retinaディスプレイではborderに0.5pxを指定できるが、MacのChromeなどでは小数点単位での指定は無視されてしまう。
通常は下記で示されている様に、デバイスやブラウザに応じて表示を変える実装が良い。
CSS retina hairline, the easy way

それでもなんとか実装したい場合は、四方を囲む場合には適さないが、transformプロパティを使って実装できる。

.hairlines::after {
  content: "";
  display: block;
  border-top: 1px solid #000;
  transform: scaleY(.5);
  transform-origin: 100% 0;
}

See the Pen half pixel border by Haruumi Kondo (@hal9188) on CodePen.