内側と外側のコンテンツに引いた角丸の枠線の角をきれいに見せる方法（メモ）

外側と内側のコンテンツにそれぞれ枠線を引いて角丸にしたとき、同じ値を指定すると不自然になりますね。これを解消する方法について、いつも忘れて調べることになるのでメモとして公開しておこうと思います。

以下はWordPressで内外2重にグループ化したコンテンツ（これをネストしたコンテンツというそうです）にそれぞれ枠線を引いた場合の例です（外側のグループ要素には赤の枠線を、内側のグループ要素には青の枠線を引いています）。

外側のグループ要素の内側の隙間（パディング）を16pxにした状態で、それぞれのグループ要素に同じ24pxの角丸を持つ枠線を引くと以下のようになります。

細かい数値では分かりにくいですが、これぐらい数字を大きくすると外側と内側の枠線の角部分が不自然なのが分かりますね。

そして以下がこの不自然さを解消するために、外側の枠線の丸みを「外側の半径 = 内側の半径 + パディング」、つまり「24px+16px=40px」にしたものです。

たったこれだけの公式を覚えて設定するだけでいい感じになりますね。

数値が小さければ気にならない部分かも知れませんが、デザインを行う場合の基本中の基本らしい？ので、特に他の方向けにコンテンツの提供を行う際には気を付けた方がいいでしょう。