こんにちわ。webデザイン担当の今坂です。

シンプルで清潔感のあるデザインを制作する場合、
なるべく装飾を使いたくない・目立たせたくない場合に、1pxの罫線をよく使いますよね。

しかし、タイトルにある通り「1px罫線でborder-radius処理をした時」に
PCモニターのレンダリングで曲線がガビガビになってしまう場合があります。

上記で設定したデザインコンセプトの場合、
2pxにするとガビガビはある程度回避できますが、明らかに太くなってしまうのでデザインの雰囲気が崩れてしまいます。
（こういった箇所の1pxって大きな違いですよね）

色々と深く考えていましたが、シンプルな対処法がありました。
罫線の色を背景色とのコントラストを弱めるです。

図を見て頂くと分かるかもしれませんが、白背景に対して「＃000」の方が角丸がガビガビして汚いですよね。
これは技術的に直せるものではないと思っていて、
曲線の描写でコントラストが強いとガビガビしているように見えてしまうのではないかと思っています。

iPhoneやMacbookで採用されているRetinaディスプレイでは高解像度なので
通常の1pxがさらに細かく描写されるのでガビガビにはなりませんが、
windowsなどの一般の方が使用しているモニターでは、まだまだ高解像度モニターが普及していませんので
こういった細かいところまで配慮出来ると、より洗練された良いデザインが出来るかと思います。