on:2010年4月16日sponsorsCSS3で実装する角丸を少しでも滑らかにするスタイルシートのトリックをsitepointから紹介します。Cornersデモページこの現象は主要な各ブラウザ全てでおこる現象で、特にSafari(Mac)では顕著に現れます。上記キャプチャはそのSafari(Mac)のもので、下記はそれを拡大したものです。角丸の拡大この現象は特定のカラーの組み合わせで生じるもので、特にオフホワイトの背景に対して明るいボーダーと暗いバックグランドを指定した際に見られます。これを少しでも滑らかにするためのトリックを紹介します。#89a;background:#369;color:#def;}#before10{moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}</textarea>アフターHTMLHTMLの変更はありません。after</p></div></textarea>CSSカラーの異なるエレメントで分けます。p{-moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;}</textarea>外側のエレメントにはborderとborder-radiusを指定し、内側のエレメントにはbackgroungのカラーと外側より一回り小さいborder-radiusを指定します。非常にシンプルなトリックですが、効果は大きいです。適用後のアフターでは角丸は明らかに滑らかに描画されています。