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

border-radius はボックスの角を丸くします。カードの控えめな4 pxから、ピル形、円、有機的なブロブまで自由に作れます。このジェネレーターでは、各角の値を指定するか、横方向と縦方向の半径を持つ楕円構文（30% 70% 70% 30% / 30% 30% 70% 70%）をそのまま入力できます。入力を検証し、最短の同等CSS、4つの個別プロパティ、Tailwindのクラスを出力します。プレビューは同じ値をお使いのブラウザが描画しています。

使い方

1. プリセットを選ぶか、カスタムのまま4つの角の半径を入力します。
2. 単位を選びます。固定の角ならpx、ボックスに合わせて変わる形なら%です。
3. ブロブや卵形は、「/」を含む詳細指定で縦方向の半径を変えて入力します。
4. プレビューのサイズを実際の要素に合わせて、CSSをコピーします。

計算式

border-radius: <左上> <右上> <右下> <左下> [ / <縦方向の半径> ]

marginと同じく、省略した値は繰り返されます。値が1つなら全部の角、2つなら対角のペア（左上と右下、右上と左下）、3つなら2番目の値が右上と左下の両方に使われます。各角は4分の1の楕円で、「/」の前が横方向、後ろが縦方向の半径です。

計算例

角が10、20、10、20 pxの場合は border-radius: 10px 20px; に短くなります。卵のプリセットは、横方向が50%、縦方向が上60%・下40%で、border-radius: 50% / 60% 60% 40% 40%; になります。4つの横方向の半径は同じなので1つにまとまりますが、縦方向の半径はまとめられないためです。