CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装

カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。

外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。

まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。

See the Pen
Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss)
on CodePen.

外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。

ちなみに、外側と内側を同じ値にすると、中心点が異なるため、内側の半径が大きく見えてしまい、バランスが悪く見える原因になります。

そしていちいち計算するのが面倒という人用に、CSSのカスタムプロパティを使用してネストされた角丸の半径を自動計算するのが、下記のCSSです。

元ネタは下記ポストより。

CSS Tip! 🤙

Use custom properties to work out the nested radius of elements for you 😎

.parent {
--nested-radius: calc(var(--radius) - var(--padding));
}
.nested {
border-radius: var(--nested-radius);
}

Couldn't resist making an interactive visual!@CodePen link below 👇 https://t.co/GfMRYvkcda pic.twitter.com/vlRbHBSa21

— jhey 🔨🐻✨ (@jh3yy) August 7, 2023

さらに詳しく知りたい人は、下記もご覧ください。

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