角丸を外側と内側のパネルに使用した際、違和感を感じたことはありませんか? 数値的には同じ値の角丸を使用しても、内側の角丸の方が少し大きく見えて、不格好になってしまいます。 この外と内の角丸をバランスよく美しく、CSSで実装する相対角丸のテクニックを紹介します。 Relative rounded corners by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで美しい角丸を実装する方法、相対角丸 CSSで美しい角丸を実装する方法、相対角丸 角丸は非常に人気が高いデザインです。しかし、外側と内側に同じ値の角丸があると、違和感があり、少し奇妙に感じます。 外側と内側に同じ値の角丸 この角丸に違和感を感じる理由は、値が同じ(たとえば、20px)であっても、それぞれの角丸の中心点が異なるからです。同じ値であ
![CSSで角丸を美しく実装する方法、相対角丸のテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d78a2dcf902e78249606bc394f1803d3c2df738/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202301%2F2023031810%402x.png)