CSS 角丸ジェネレーター（border-radius）

短縮記法の順序

border-radius: top-left top-right bottom-right bottom-left;

margin / padding と同じく、左上から時計回りです。省略した値は対角の角に反映されます。したがって border-radius: 10px 20px; は左上と右下が 10px、右上と左下が 20px という意味になります。

このジェネレーターが生成しないもの

各角に 1 つの半径しか設定しないため、楕円形の角（border-radius: 20px 10px / 5px 15px; のようなスラッシュを使う 2 値形式）や border-top-left-radius のような個別指定は生成されません。必要な場合は CSS を手書きしてください。

パーセントとピクセル

正方形の要素では 50% が円になります。200×100 の長方形では、50% は水平半径 100px・垂直半径 50px となり、楕円になります。

よく使う形状

ピル型ボタンの「高さの半分」ルール

ピル型ボタンとは、左右の端が完全な半円になっている長方形のことです。これを確実に作るには、border-radius を要素の高さの少なくとも半分に設定します。9999px（または非常に大きな値）を使っても安全です。ブラウザーが半径を実際の形状に合わせて自動的に丸めてくれるからです。

overflow との関係

border-radius は既定では背景・ボーダー・ボックスシャドウだけを切り抜きます。子要素（画像やネストした要素）を丸い形に切り抜くには、次を追加します：

overflow: hidden;

または isolation: isolate と overflow: hidden を併用すると、重なり合うコンテキスト（スタッキングコンテキスト）も内側に収められます。

アクセシビリティに関する注意

border-radius 自体にアクセシビリティ上の問題はありませんが、インタラクティブな要素（ピル型ボタンやチップ）を極端に丸めても、タップ領域を縮めてはいけません。角の丸みに関わらず、ボタンは少なくとも 44×44px（WCAG の推奨）を確保してください。