角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法

角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。

こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。
しっかりとした数値で2つの角丸をデザインすることができます。

Quick Tip: Rounded Corners Done Right

見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。

親と子の中心点を揃える

CSSのborder-radiusで設定する時は、親と子のマージンがそのまま差の値になります。

CSSでも設定は簡単

入れ子の角丸を使って悩んだ時は、ぜひお試しください。