[CSS]Safariで見かける角丸のにじみを解消するスタイルシート

Webkit系ブラウザのSafariでよく見かける、角丸のにじみを解消するスタイルシートを紹介します。

Fixing the background 'bleed'

Safariでborderとborder-radiusを使用した際に背景色が角丸の箇所でにじむのを解消するには、下記のスタイルシートを該当箇所に追記します。

CSS

「background-clip」は背景の適用範囲を指定するプロパティです。初期値は「border-box」で、指定できる値には「padding-box」「content-box」などがあります。
実例や詳しい解説は下記ページを参照ください。

• CSS3: background-origin and background-clip（英語）
• background-clip：背景の適用範囲を指定する（日本語）