【UI / CSS】内包された要素で角丸を揃える方法

内包（ネスト）された要素とは、HTMLやCSSにおいて、
ある要素の中に別の要素が含まれている（入れ子構造になっている）状態を指します。
これは階層的な構造であり、親要素と子要素の関係として表現されます。

丸い境界線（border-radius）を持つ要素をネストするとき、
適切に設定しないと見た目が崩れることがあります。
特に、外側と内側の要素の角丸が一致していないとズレたように見える原因になります。

デザインを見比べてみる

以下の図を参考にして、正しい設定と間違った設定を比べてみましょう。

左のデザイン：外側と内側の角丸が計算されておらず、角丸の形が若干不自然。
右のデザイン：外側の角丸が内側の角丸と余白（パディング）を考慮して計算され、スムーズな見た目。

少し違いではあるものの、より見た目が綺麗になります。

解決のカギは簡単な計算式

ネストされた要素で角丸を揃えるには、「内側の丸みの数値」が「外側の丸みの数値 – パディングの数値（内側要素との距離）」に等しい必要があります。

コードで確認する（変数を使用して動的に）

以下は、計算式を使って実際に動作するサンプルコードです。

See the Pen Untitled by Hiroyuki Koyama (@soushin-horoyuki) on CodePen.

掲載したCSSのコードについて、どのように角丸を揃えているのか、各部分の役割を分かりやすく説明します。

/* カードの内側 */
.card-inner {
  background-color: white; /* 内側の背景色 */
  border-radius: var(--inner-radius); /* 内側の角丸 */
  padding: 16px; /* コンテンツの余白 */
  width: 100%; /* 内側要素の幅を外側に合わせる */
  box-sizing: border-box; /* パディングを含むサイズ計算 */
}

1. CSS変数の利用
   –padding は内側要素との距離（余白）を指定します。
   –inner-radius は内側要素の角丸の半径を指定します。
2. border-radius の計算式
   外側の角丸は、calc(var(–inner-radius) + var(–padding)) を使って自動計算されます。これにより、余白を考慮して内側と外側の角丸が一貫したデザインになります。
   

まとめ

ネストされた要素の角丸をきれいに揃えるには、簡単な計算式を使うだけでOKです。
以下のポイントを覚えておきましょう。

計算式を活用する
outerRadius = innerRadius + padding

CSS変数を使って保守性を向上
値を変更するだけで、全体のデザインを調整できます。

実際に試してみる
今回のコードを応用すれば、ネストされた要素が多いUIデザインでも一貫性を保てます。