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

カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、

[coliss]

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

[xlc]

角丸を二重線にしたいことなんてあるのかね。私なら枠線を太くすると思う。前にも同じコメントをした気がするが……

[otchy210]

あれの話でしょ？と思ったらやっぱりあれの話だったが、var と calc で汎用に作るってのが自分にとっては新しかった。

[s15i]

CSSの関数ってそう使うのか！という感激がある。

[osiro2]

カードっぽいデザインの中に写真置いてどちらも角丸したいときとか、これやればよかったのか。面倒で数値的に考えてなかったけど、こんなシンプルだったのかー。考えてみればそうだよなー。

[yarumato]

“外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。CSSで自動計算”

[kijtra]

なるほど。こりゃいいや。

[north_korea]

手動でやってたけどよく考えたら今のCSSは自動計算できるんだった

[fncl]

製造業でパイプの曲げ加工の図面を書く時に自然とそうなるので覚えた。

[eartht]

現場では自分の意図しない色んなカンプが上がってくる。いつか役に立つ日が来ようて

[AzuLitchi]

自分もよほど線の太さに追い込みかける気持ちにならなければborder-style: double;で二重線にするかなあ。

[Falky]

まあ、目で合わせちゃうけどね

[GiveMeChocolate]

はえ〜

[ayumun]

“外側の半径 = 内側の半径 + パディング” なる

[uunfo]

いつまで角丸やってんだ

[nekoline]

いいですね。Illustratorとかでも応用ききそう

[nmcli]

相対角丸。なるほどなぁ。

[toaruR]

おおーー