CSS border-radiusの使い方 — 角丸・楕円・非対称角丸の作り方
CSS border-radiusは要素の角を丸くするプロパティです。単純な角丸から楕円・ピル形状・非対称の複雑な角丸まで、border-radiusだけでさまざまな形状を作ることができます。
border-radiusの4隅の指定方法
border-radiusは4隅を個別に指定できます。border-radius: 10px は全角を10pxに。border-radius: 10px 20px 30px 40px は左上・右上・右下・左下の順です（時計回り）。border-top-left-radius・border-top-right-radius・border-bottom-right-radius・border-bottom-left-radius で個別に設定することもできます。
%指定と楕円形の角丸
border-radiusに%を使うと要素のサイズに比例した角丸になります。border-radius: 50% を正方形に適用すると完全な円になります。border-radius: 50% 20% のように縦横比率を変えると楕円的な角丸になります。スラッシュ（/）区切りで水平半径と垂直半径を個別指定できます（例: border-radius: 30px / 50px）。
ピル形状・タグ形状の作り方
border-radius: 999px（またはborder-radius: 9999px）のような非常に大きな値を指定すると、幅に関わらず半円の端を持つピル形状になります。バッジ・ラベル・タグUIによく使われます。border-radius: 0 で角丸を削除してシャープな角にできます。
Border Radius Generatorの活用
Border Radius Generatorでは8つのスライダーで左上・右上・右下・左下の水平・垂直半径をそれぞれ独立して調整できます。一括/個別モード切り替え・px/%単位の切り替えに対応し、生成したborder-radiusのCSSコードをすぐにコピーできます。複雑な非対称形状のCSS生成に役立ちます。