💡 この記事でわかること
- border-radiusとは何か
- 基本の書き方(1つの値で全体を丸くする)
- 四隅を個別に指定する方法
- 円形・楕円を作る方法
- よくある使用例(丸ボタン・アバター画像など)
1. border-radiusとは?
border-radiusとは、
👉 要素の角を丸くするためのCSSプロパティです。
💡 ボタンやカード、画像などの角にちょっとした丸みをつけるだけで、印象がやわらかくなります。使い方はシンプルですが、指定の仕方にいくつかバリエーションがあるので、順番に見ていきましょう。
2. 基本の書き方
値を1つだけ指定すると、4つの角すべてが同じ丸みになります。
.box {
border-radius: 8px;
}👉 数値が大きいほど丸みが強くなります。8px前後は「少し角を落とした」程度の控えめな丸み、16px以上になるとはっきり丸みのある印象になります。
3. 四隅を個別に指定する
4つの値をスペース区切りで指定すると、角ごとに異なる丸みを付けられます。順番は「左上→右上→右下→左下」(時計回り)です。
.box {
/* 左上 右上 右下 左下 */
border-radius: 16px 4px 16px 4px;
}特定の角だけを指定したい場合は、個別のプロパティを使うこともできます。
.box {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}👉 「タブ」のように上だけ丸くしたい、といった場面ではこちらの個別プロパティが使いやすいです。
4. 円形・楕円を作る
border-radiusを50%にすると、要素を円形にできます。
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}⚠️ きれいな円にするには、widthとheightを同じ値にしておく必要があります。widthとheightが異なる場合は、円ではなく楕円になります。プロフィール画像(アバター)を丸くする定番の書き方です。
5. よくある使用例
border-radiusは、次のような場面でよく使われます。
- ボタンの角を軽く丸めて、クリックしやすい印象にする
- プロフィール画像を50%で円形にする
- カードUIの角を丸めて、やわらかい印象にする
- 入力フォームの角を丸めて、モダンな見た目にする
💡 border-radiusとbox-shadowを組み合わせると、角丸+ふんわりした影の「カードUI」を簡単に作れます。この2つはセットでよく使われるプロパティなので、あわせて覚えておくと便利です。
📝 まとめ
- border-radiusは要素の角を丸くするプロパティ
- 1つの値を指定すると4つの角すべてが同じ丸みになる
- 4つの値で「左上→右上→右下→左下」の順に個別指定できる
- 50%にすると円形(widthとheightが同じ場合)になる
- box-shadowと組み合わせるとカードUIが作りやすい
数値を変えながらブラウザで見た目を確認すると、丸みの強さの違いが直感的につかめます。ぜひ実際に手を動かして試してみてください。