女性向けエンジニアスクール
3秒でわかる
CSS で要素の角を丸めるプロパティ。ボタンやカードの印象を決める指定で、値の入れ方しだいで真円や楕円、片側だけの丸めまで作り分けられます。
もう少し詳しく
どういうものか
border-radius は、要素の四隅を丸めるための CSS プロパティです。値には長さかパーセントを指定し、指定した半径の円弧で角が削られます。枠線が無い要素にも効き、背景色や背景画像も丸められた形に切り取られます。
値を 1 つ書けば四隅すべて、4 つ書けば左上から時計回りに個別指定になります。border-top-left-radius のように隅ごとに書くこともできます。
なぜ必要か
角の処理は、そのまま画面の印象を決めます。直角のままだと硬く事務的に見え、丸めるほど柔らかく見えます。加えて、丸めた矩形は押せる場所として認識されやすく、ボタンやタグの表現に使われます。画像を丸く切り抜いた利用者アイコンも、この 1 行で作れます。
具体例
.card {
border-radius: 8px; /* 四隅すべて 8px */
}
.tab {
border-radius: 8px 8px 0 0; /* 上だけ丸める */
}
.pill {
border-radius: 9999px; /* 高さより大きい値で完全な楕円 */
}
.avatar {
width: 64px;
height: 64px;
border-radius: 50%; /* 正方形なら真円 */
object-fit: cover;
}
.leaf {
border-radius: 40px / 12px; /* 横半径 / 縦半径で楕円の角 */
}つまずきやすいところ
border-radius: 50% を正方形でない要素に使うと、真円ではなく楕円になります。真円にしたいときは幅と高さを揃えます。丸い形を固定したいなら、9999px のような大きな値を使うほうが安全です。
中身がはみ出す問題もよく起きます。子要素の画像や背景は、親を丸めただけでは角が四角いまま残ります。親に overflow: hidden を付けて切り取ります。
入れ子にした要素を同じ半径で丸めると、外側と内側の曲線がずれて見えます。内側は「外側の半径から余白ぶんを引いた値」にすると自然に揃います。
半径の合計が辺の長さを超えると、ブラウザが比率を保ったまま自動で縮めます。エラーにはならないので、想定より丸まらないときはこの調整が働いていないか確認します。
覚え方
角のところに円を置いて、その円の外にはみ出した部分を削っている、と考えると、4 つの値の順番もパーセント指定の挙動も同じ理屈で説明できます。
