ウェブデザインで角を丸くしたいとき、CSSの border-radius を使うのは定番です。
ところが、単純に「R16」と指定しても、外側と内側の曲線が微妙にズレて見えることがあります。
この記事では、その原因と、滑らかに見せるための工夫を解説します。
なぜ曲線が美しくならないのか
border-radius は、要素の外側の角に対して半径を適用します。
たとえば次のようなコードを書いたとします。
.box {
border: 4px solid #ccc;
border-radius: 16px;
}
このとき、ブラウザは外側の角（borderの外縁）を半径16pxで描きます。
一方で、内側（borderの内縁）は、単純に16px−4px＝12pxのようにはなりません。
ブラウザの描画エンジンは、外側と内側を別々の円弧として補完するため、外と内のカーブが同心円にならず、わずかに歪んだ曲線になります。
見た目にどう影響するか
実際に観察してみると：
- 外側の線に比べて内側のカーブが急に見える
- 厚みのあるボーダーでは、角が「つぶれた」ように感じる
- 角丸ボックスを積み重ねたデザインでは、カーブの繋がりが不自然になる
これは、人間の目が滑らかな連続曲線（同心円）を自然に感じるため、わずかな差でも「きれいじゃない」と感じてしまうのです。
よくある誤解：「Rを16にすれば全部16」
多くの人が「border-radiusを16にすれば、内側もR16になる」と思いがちですが、実際にはブラウザは「borderを含む外枠」に対してだけRを計算します。
そのため、borderの太さが増すほど、内側のカーブは急になります。
滑らかに見せるための工夫
1. 外側と内側で半径を分ける
擬似要素や二重構造を使って、外側にR16、内側にR12を設定することで、より自然なカーブが得られます。
.card {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
background: #fff;
z-index: 1;
}
このように半径を微妙に変えることで、視覚的に滑らかな曲線が再現できます。
2. 二重ボックス構造にする（BricksやElementorでも簡単）
外側コンテナに border-radius: 16px;
内側コンテナに border-radius: 12px; を指定します。
外側に枠線、内側に背景を設定すると、見た目が自然で、美しいカードやボタンを作れます。
Bricksで制作されたこのサイトのヘッダーに採用されている方法です。
3. SVGで正確なカーブを描く
完璧に滑らかな曲線を求める場合は、SVGの<rect>要素を使って同心円的な角丸を描くのも一つの方法です。
まとめ
border-radiusは外側の角を基準に描かれる- 内側の曲線は自動で同心円にはならない
- そのため、厚いボーダーでは角が歪んで見える
- 外R16／内R12のように、意図的に差をつけると滑らかになる
デザインの美しさは、こうした小さな違和感を減らすことから生まれます。
CSSの仕様を理解し、意図的に補正を加えることで、よりプロフェッショナルな見た目を実現できるでしょう。
