CSS border-radius 生成

使い方

1. 画面にはすでに角丸カード（16px）が表示されています。半径スライダーを動かすか単位（px / %）を切り替えると、すべてライブで更新され、押すボタンはありません。
2. チップでモードを切り替えます。「すべてのコーナー」は1つのスライダーで操作し、「コーナーごと」は4つの角を個別に編集し（左上、右上、右下、左下）、「楕円」は各コーナーに水平半径と垂直半径を追加します（スラッシュ構文）。
3. プリセット（シャープ、角丸カード、円、ピル、リーフ、ブロブ）をクリックすると、すぐに使える形状が読み込まれ、モードと単位も自動的に切り替わります。border-radius 宣言全体をワンクリックでコピーできます。

範囲、制限、よくある質問

• border-radius のみです。iOS 風の滑らかな連続コーナー（スクワークル）は、clip-path や SVG が必要なため対象外です。
• 既存の CSS 値の貼り付けには対応していません。すべての値はスライダー、プリセット、モードのチップから決まるため、誤解析が起きる余地がありません。
• 隣接する半径の合計が辺の長さを超えると、ブラウザが比例して縮小します。プレビューが実際の描画結果であり、コードボックスには設定した値が表示されます。
• ピルプリセットは 9999px を出力します。「可能な限り丸く」というコミュニティの省略記法で、ブラウザは短い辺の半分に制限します。
• パーセントは軸ごとに測定されます。水平半径は幅に対して、垂直半径は高さに対して計算されます（プレビューは正方形なので、そこでは同じ値になります）。ほかの要素サイズでは同じパーセントでも形が変わります。
• 何も保存されず、リンクのパラメーターで共有されることもありません。再読み込みすると既定の角丸カードに戻ります。すべてブラウザ内で実行されます。