CSS border-radius ジェネレーター

使い方

1. プリセット（円、ピル、葉っぱ、しずくなど）から近い形を選ぶか、値を直接調整します。
2. 「4つの角を同じ値にする」をオフにすると、左上・右上・右下・左下を別々に指定できます。
3. 単位をpx・%・remから選びます。pxとremの切り替えでは 16px = 1rem で換算します。
4. 「楕円の角」をオンにすると、角ごとに横と縦の半径を別々に指定できます。
5. プレビューの背景や形を切り替えて確認し、CSSまたはTailwind CSSのクラスをコピーします。

注意事項

• 入力できる値は、pxが0〜9999、%が0〜100、remが0〜625です。マイナスは0に、上限を超えた値は上限に丸めます。小数は4桁までです。
• %は要素の幅と高さに対する割合なので、同じ値でも要素の大きさや縦横比によって見た目が変わります。%との切り替えでは数値を換算せずにそのまま使います。
• Tailwind CSSは任意値（rounded-[…]）の書き方を基本に出力します。v3.0以降とv4で使えますが、v2以前では使えません。
• 1つの値の中で単位を混ぜる（例：10px 50%）ことはできません。
• 入力した値は保存しません。ページを閉じると消えます。

計算・変換の仕組み

CSSの省略ルールに沿って、できるだけ短く書きます。4つの角が同じなら1つ、左上と右下・右上と左下が同じなら2つ、右上と左下だけが同じなら3つ、それ以外は4つの値になります。

楕円の角では「横の半径 / 縦の半径」のスラッシュ記法で書きます。縦の値がすべて横と同じときはスラッシュ以降を省きます。0も単位付きで「0px」と書きます。

Tailwind CSSの名前付きクラスはv3とv4で値が異なるもの（rounded-sm など）があるため使いません。例外として、すべて0のときは rounded-none、すべて9999pxのときは rounded-full を出力します。