CSS border-radiusとは？
CSSのborder-radiusプロパティは、要素の角を丸くします。4つの角を均一に設定するか、各角を個別に制御して、ピル形状、円形、有機的なブロブのような形状を作成できます。
よく使うパターン
- ピル形状：border-radiusを要素の高さの半分に設定（例：
border-radius: 9999px）。 - 円形：正方形の要素に
border-radius: 50%を使用。 - 控えめな角丸：カードやボタンには4-8pxの小さな値。
よくある質問
パーセンテージを使えますか？
はい。パーセンテージ値は要素の寸法に対する相対値です。正方形の要素に50%を設定すると完全な円になり、非正方形の要素では楕円になります。
画像にborder-radiusは使えますか？
はい。<img>要素やそのコンテナにborder-radiusを直接適用して、丸い画像形状を作成できます。overflow: hiddenと組み合わせてきれいなエッジにします。