入れ子要素のborder-radiusをいい感じにする

要素を入れ子にする場合、親と子で同じ値のborder-radiusを設定すると視覚的に微妙になってしまう。親のborder-radiusからpaddingを引いた値を子のborder-radiusに設定することで、親子のborder-radiusが同じに見えるようになる。

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {
  --padding: 8px;
  --radius: 24px;
  
  border-radius: var(--radius);
  padding: var(--padding);
  --nested-radius: calc(var(--radius) - var(--padding));
}
.child {
  border-radius: var(--nested-radius);
}

.parent {
  border: solid 4px blue;
}
.child {
  border: solid 4px red;
}

デモ

未調整

調整済み