Chromeで角丸（radius）がジャギーしてしまう

Question

以下状況で角丸の線がジャギーしてしまいます。

・chorme（最新）
・黒ベタ塗り背景
・白ボーダー線の角丸（正円）

##htmlコード

<div class="wrapepr-btns">
	<ul class="list-btns">
		<li>
			<div class="button-circle">
				<a href="#" target="_blank">
					<span class="icon-font">###</span>
				</a>
			</div>
		</li>
		<li>
			<div class="button-circle">
				<a href="#" target="_blank">
					<span class="icon-font">###</span>
				</a>
			</div>
		</li>
	</ul>
</div>

###CSSコード

.wrapepr-btns {
 background: #000000;
 width: 100%;
 height: 100%;
}
.list-btns > li {
 display: inline-block;
 margin-left: 15px;
}
ul.list-btns> li > div.button-circle { 
 width: 50px;
 height: 50px;
 text-align: center;
 border: 1px solid #ffffff;
 border-radius: 50%;
}
ul.list-btns> li > div.button-circle a {
 display: inline-block;
 width: 100%;
 height: 100%;
}

角丸のborderを2pxにすると滑らかになっているようは見えますが、
1pxですとジャギーがひどいです。
背景が黒もしくは暗めの場合のみそう見えます。

同じような経験のあるかた、
もしくは上手いテクニックをご存知の方
教えてきた頂きますと幸いです。

Answer 1

1pxの曲線/斜線は、どうしてもそうなります。
下記記事はフォトショップにおけるにじみの話ではありますが、「シェイプレイヤーがにじむ原因」の図を見てください。それと同じことが曲線描画時に起こっています。

【Photoshop、シェイプレイヤーはにじまない。角丸だってゆがまない。 - Alan Smithee!】
http://alasmi.hatenablog.com/entry/shape_layers

斜線や曲線は、境界に近い色をおいて少し補間することにより線が滑らかに見えるようにしています。

「境界に近い色をおいて少し補間」ということは、線と背景のコントラストが高い＆補完に使えるピクセルが少ない場合、線として表現するのに無理がある（ジャギーが出る）、ということになります。

「画像処理ソフトで出力した線は綺麗じゃないか！」と思われるかもしれませんが、それは補完アルゴリズムが違うからだと思われます。比較的Chromeは速度を優先するのでレンダリングが汚いという印象があります。

Comments

[kirimi_]

詳しいご解説をいただきありがとうございます。
ウェブフォントも心なしかジャギっているように見えていたので、納得です。

[kei344]

フォントレンダリングも基本的には同じですが、少し違うところがあって、OSによる影響があると言うところです。例えばWindowsは7以降はましになりましたが、たしかそれまでは文字にアンチエイリアス（線の補完）が働かず、カクカクした文字になっていました。

Answer 2

borderの代わりにbox-shadowを使うと少しだけ改善します

Comments

[kirimi_]

試してみたところ、それっぽくアウトラインがかかったようになりました！
教えていただきありがとうございました。