CSS ・ 枠線・装飾
border-radius
角丸
要素の角を丸くします。値を大きくするほど丸みが強くなり、50% を指定すると正方形の要素は円になります。
01
サンプルコード
HTML
1<div class="box">border-radius: 12px</div>
2<div class="circle">50%</div>
CSS
1.box {
2 padding: 16px;
3 border: 1px solid #b68235;
4 border-radius: 12px;
5}
6.circle {
7 width: 80px;
8 height: 80px;
9 margin-top: 16px;
10 display: grid;
11 place-items: center;
12 background: #f6ead8;
13 border-radius: 50%;
14}
02
実行結果
ブラウザでの表示
03
解説
border-radius は四隅の丸みの半径を指定します。枠線や背景色がある要素で効果がわかります。
値を4つ並べると「左上・右上・右下・左下」の順に個別の丸みを指定できます。
幅と高さが同じ要素に 50% を指定すると円になり、アイコンやアバター画像によく使われます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
8px | 四隅すべてを8pxの丸みに |
8px 0 8px 0 | 左上・右上・右下・左下の順に指定 |
50% | 正方形なら円、長方形なら楕円 |
9999px | ボタンなどを両端が丸い形にする |
丸いアバター画像
画像にも border-radius は効きます。object-fit と組み合わせると切り抜きが自然になります。
CSS
1.avatar {
2 width: 48px;
3 height: 48px;
4 border-radius: 50%;
5 object-fit: cover;
6}
注意点
- 01子要素が角からはみ出す場合は、親に overflow: hidden を指定します。