top-left左上から始める
4値では左上から時計回りに、右上・右下・左下へ進みます。
border-radius
要素の4つの角を丸くするプロパティ。角ごとの値と、まとめて書く順番を確かめます。
遊んでみよう
4つの角角丸
CSS
.element border-radius: 28px;
値のパターン
border-radiusの構成要素
radius値が大きいほど丸い
0なら直角です。幅や高さの半分以上にすると円やピル型になります。
shorthand同じ値は短く書ける
向かい合う角が同じなら、paddingと同じように値を省略できます。
早見表
順番は左上 → 右上 → 右下 → 左下。向かい合う角が同じなら短く書けます。
01
16px4隅すべて全方向02
16px 32px左上右下・右上左下対角線03
8px 24px 40px左上・右上左下・右下3種類04
8px 16px 32px 48px4隅を個別時計回りよくある使い方
01
カードの角を整える
少しだけ丸めると、内容のまとまりをやわらかく見せられます。
border-radius: 16px;02
ボタンをピル型にする
十分に大きな値を指定すると、横長のボタンを丸い形にできます。
border-radius: 999px;03
画像を円形にする
正方形の画像へ50%を指定すると、円形のアバターになります。
border-radius: 50%;ポイント
丸めた内容がはみ出すときはoverflowを確認。
背景や境界線は丸くなりますが、子要素が角からはみ出す場合があります。必要な場面では overflow: hidden; を組み合わせます。
関連するCSSも見てみよう。
border-radius と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。