ボーダー
border-radius
border-radius は要素の角を丸めます。4 つの角をまとめて指定するショートハンドで、/ で区切ると横と縦の半径が違う楕円の角も作れます。
構文
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
border-radius48pxborder-top-left-radius
8pxborder-top-right-radius
48pxborder-bottom-right-radius
8pxborder-bottom-left-radius
コード
.box {
background: #88d1c7;
border-radius: 48px 8px;
}コントロール
border-radius
すべての角を同じ値にする
楕円の角にする（/ のあとに縦の半径）
top-left48px
top-right8px
bottom-right48px
bottom-left8px
解説
値の数と角の対応
値は左上から時計回り（左上 → 右上 → 右下 → 左下）に割り当てられ、足りない分は対角の角からコピーされます。
- 1 つ: すべての角（
10px） - 2 つ: 左上と右下 / 右上と左下（
10px 40px） - 3 つ: 左上 / 右上と左下 / 右下（
10px 40px 0） - 4 つ: 左上 / 右上 / 右下 / 左下
上の「ショートハンドの内訳」で、各角のロングハンドにどう展開されるかを確認できます。
楕円の角
/ の前が横方向、後ろが縦方向の半径です。たとえば 40px / 20px は横に長い楕円の角になります。なお border-top-left-radius などのロングハンドでは、/ ではなく空白区切りで 40px 20px と書きます。
% は幅と高さそれぞれに対する割合
横の半径は要素の幅、縦の半径は高さに対する割合になります。そのため長方形に 50% を指定すると、正円ではなく楕円になります。左右が半円のカプセル形にしたいときは、9999px のように十分大きな長さを指定します。
大きすぎる値は自動で縮められる
隣り合う角の半径の合計が辺の長さを超えると、すべての半径が同じ比率で縮められます。大きな値を入れても形が破綻しないのはこのためです。プレビューの右下をドラッグしてサイズを変えると、縮み方の違いがわかります。
角丸に沿うもの、沿わないもの
背景・ボーダー・box-shadow は角丸に沿って描かれます。一方で子要素などの中身は、overflow: hidden などを指定しないと角からはみ出して表示されます。