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

サイト構築 -CSS

Post on:2023年3月28日

CSSで美しい角丸を実装する方法、相対角丸

角丸は非常に人気が高いデザインです。しかし、外側と内側に同じ値の角丸があると、違和感があり、少し奇妙に感じます。

外側と内側に同じ値の角丸

この角丸に違和感を感じる理由は、値が同じ（たとえば、20px）であっても、それぞれの角丸の中心点が異なるからです。同じ値であっても、内側の半径は少し大きく見え、不格好になります。

幸いなことに、この問題は簡単な数式を使えば簡単に解決します。

P + R = RO

各変数は、

P: 内と外の半径間のパディング（スペース）
R: 内側半径
RO: 計算された外側半径

これで外側の角丸も内側の角丸も同じ中心点になります。

外側の半径 = 内と外の半径間のスペース + 内側の半径

この数式を使用すると、パーフェクトな相対角丸が得られます。

それではHTMLとCSSでこれを実装してみましょう。
まずは、HTMLから。

<div class="matched-radius">
    <div class="matched-radius__inner"></div>
</div>

</div>

Rは内側のmatched-radius__inner要素の半径で、ROは外側のmatched-radius要素の半径になります。Pはmatched-radiusのpadding値になります。

CSSは、外側の要素から始めます。

.matched-radius {
  --matched-radius-padding: 8px;
  --matched-radius-inner-size: 12px;

  padding: var(--matched-radius-padding);
  border-radius: calc(
    var(--matched-radius-inner-size) + var(--matched-radius-padding)
  );
}

.matched-radius {

--matched-radius-padding: 8px;

--matched-radius-inner-size: 12px;

padding: var(--matched-radius-padding);

border-radius: calc(

var(--matched-radius-inner-size) + var(--matched-radius-padding)

);

}

内側の半径のサイズとパディング用に、2つのカスタムプロパティがあります。これを設定しておくと、外側の半径をcalc()で算出できます。

つづいて、内側の要素のCSSです。

.matched-radius__inner {
  border-radius: var(--matched-radius-inner-size);
}

.matched-radius__inner {

border-radius: var(--matched-radius-inner-size);

}

これだけです！
これら数行のCSSで、角丸を常に美しく見えるように実装できます。さらに、このCSSはユーティリティとして利用できるので、必要なときに必要な場所で使用できます。

すべてのCSSは、下記の通りです。コピペで簡単に使用できます。

.matched-radius {
  --matched-radius-padding: 8px;
  --matched-radius-inner-size: 12px;

  padding: var(--matched-radius-padding);
  border-radius: calc(
    var(--matched-radius-inner-size) + var(--matched-radius-padding)
  );
}

.matched-radius__inner {
  border-radius: var(--matched-radius-inner-size);
}