💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSSで角を丸くする方法｜border-radius
📌
結論
border-radius で角を丸くできます
📝 実際のコードはこちら
div { border-radius: 8px; }指定方法
| 値 | 効果 |
|---|---|
8px | 軽い角丸 |
50% | 完全な円（正方形の場合） |
9999px | ピル型（横長でも完全な丸） |
まとめ
・border-radius で角丸
・50% で円形
・カード、ボタン、アバターによく使う
演習で試してみよう
divの角を8px丸くしてみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
divの角を8px丸くしてください。
詰まったらヒント
border-radius: 8px;