CSSのborder-radiusは四隅ごとに水平と垂直の半径を指定する

CSSで箱の角を丸くするなら、border-radiusを指定します。四隅を同じ丸みにするだけなら、値は一つで足ります。

.notice {
  border-radius: 8px;
}

値を二つ以上書く場合は、左上から右上、右下、左下の順に割り当てます。スラッシュを挟む書き方では、前半が水平方向の半径、後半が垂直方向の半径です。背景と境界線は曲線に沿いますが、普通の子要素まで自動で切り抜く指定ではありません。

一つから四つの値は左上から時計回りに割り当てる

border-radiusは、四隅に対応する個別のプロパティをまとめて指定する短縮形です。値を四つ書くと、次の順で角へ割り当てられます。

.panel {
  border-radius: 8px 16px 24px 32px;
}

値を省略した場合は、向かい合う角へ同じ値が入ります。

一つの角だけ変える場合は、border-top-left-radiusなどの個別指定も使えます。どの角を変えるかが明確なら、無理に短縮形へまとめる必要はありません。

スラッシュの前が水平半径で後ろが垂直半径になる

角の曲線は、円だけではなく楕円でも作れます。一つの角へ二つの値を指定する場合は、最初の値が水平半径、次の値が垂直半径です（border-radiusの定義）。

.ticket {
  border-top-left-radius: 24px 12px;
}

四隅をまとめて楕円形の角にする場合は、スラッシュで水平半径と垂直半径を分けます。

.ticket {
  border-radius: 24px / 12px;
}

この例では、四隅の水平半径が24px、垂直半径が12pxです。スラッシュの両側には、それぞれ一つから四つまで値を書けます。

.ticket {
  border-radius: 24px 12px / 12px 6px;
}

この書き方では、左上と右下に水平24px、垂直12pxを使います。右上と左下には、水平12px、垂直6pxを使います。値の数だけを見ず、スラッシュの前後を別々の四隅指定として読みます。

背景とborderは角の曲線に沿って描かれる

border-radiusは、境界線がある箱にも、背景だけの箱にも使えます。境界線の各スタイルは角の曲線に沿い、背景も対応する曲線の内側へ描かれます。

.notice {
  background: #eef5f8;
  border: 2px solid #315b70;
  border-radius: 10px;
  padding: 12px;
}

背景をどの箱の範囲まで描くかは、background-clipで決まります。初期値のborder-boxでは境界線の外側までが描画範囲です。padding-boxなら境界線の内側、content-boxなら内容領域までに絞ります（background-clipの定義）。

.notice {
  background: #eef5f8;
  background-clip: padding-box;
  border: 2px solid rgba(49, 91, 112, 0.5);
  border-radius: 10px;
}

半透明の境界線の下へ背景色を見せたくない場合は、background-clip: padding-boxを選べます。角丸の大きさを決めるborder-radiusと、背景の描画範囲を決めるbackground-clipは、役割が違います。

子要素を角の内側へ収める処理は別に決める

親要素へborder-radiusを指定しても、普通の子要素を隠す処理まで加わるわけではありません。角まで広がる画像を子要素として置くと、画像の四角い角が親の曲線からはみ出すことがあります。

子要素も曲線で切り抜く必要がある場合は、親要素のoverflowをvisible以外へ変更します。たとえば、カード全体からはみ出す部分を隠すなら次のように指定します（角に沿った切り抜き）。

.card {
  border-radius: 12px;
  overflow: hidden;
}

.card img {
  display: block;
  width: 100%;
}

overflow: hiddenは、角の部分だけでなく、箱からはみ出すすべての内容を隠します。子要素の影や、箱の外側へ配置する装飾がある場合は、その表示まで消えてよいかを先に確かめます。画像が角へ触れないように余白を取れるなら、切り抜かずにpaddingで収める方法もあります。

対象ブラウザーでは非対称の角と子要素まで確認する

一つの値で四隅を丸めただけでは、値の順序や切り抜きの問題を見つけられません。確認用の箱を一つ作り、次の三状態を順に表示します。

1. 四つの異なる値を指定し、左上から時計回りに対応するか確かめる
2. スラッシュの前後へ異なる値を置き、横長と縦長の曲線を確かめる
3. 背景、境界線、子画像を入れ、overflowの有無で表示を比べる

対象にするパソコンと携帯端末のブラウザーで同じページを開きます。角丸が表示されるかだけでなく、境界線の太さ、背景の端、画像のはみ出しも見ます。対応を確認できないブラウザーでは、四角い箱のままでも内容を読める設計にしておけば、角丸のために操作や情報を失いません。

最初の一手は、四つの角へ異なる値を入れた確認用の箱を作ることです。値の順序を目で確かめてから、実際の部品へ必要な半径だけを移してください。