CSSで角丸を美しく実装する方法、相対角丸のテクニック

角丸を外側と内側のパネルに使用した際、違和感を感じたことはありませんか？ 数値的には同じ値の角丸を使用しても、内側の角丸の方が少し大きく見えて、不格好になってしまいます。 この外と内の角丸をバランスよく美しく、CSSで実装する相対角丸のテクニックを紹介します。 Relative rounded corners by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで美しい角丸を実装する方法、相対角丸 CSSで美しい角丸を実装する方法、相対角丸 角丸は非常に人気が高いデザインです。しかし、外側と内側に同じ値の角丸があると、違和感があり、少し奇妙に感じます。 外側と内側に同じ値の角丸 この角丸に違和感を感じる理由は、値が同じ（たとえば、20px）であっても、それぞれの角丸の中心点が異なるからです。同じ値であ

[coliss]

角丸をバランスよく美しく、CSSで実装する相対角丸のテクニック。

[sweetpeat]

DIVで絵を描くな😡💢

[xlc]

50%を指定すると円が描けるという話かと思ったら違った。この例なら私は枠線を太くするな。

[mztns]

背景画像があったりして単純なborderじゃ実現出来ない場面はままある

[reboot_in]

“この問題は簡単な数式を使えば簡単に解決します。 P + R = RO 各変数は、 P: 内と外の半径間のパディング（スペース） R: 内側半径 RO: 計算された外側半径 これで外側の角丸も内側の角丸も同じ中心点になります。”

[kijtra]

ボーダーだと半分が外側にはみ出るからこれは良いかも。

[webnoshiori]

有益

[Lhankor_Mhy]

なるほど。でも、できればボーダーで解決したい。

[spark7]

内側外側のRの比ってずいぶん簡単な計算だったんだな『Pading + Radius(内側) = RO(外側)』

[kkobayashi]

100年前から角丸の話してるな