Border Radius Generator

使い方

1. 4 本のスライダーを動かし、左上・右上・右下・左下の半径を個別に設定します。
2. レイアウトに応じて単位を切り替えます：px・パーセント・rem。
3. スライダーを動かすとプレビューのボックスが即座に変形します。
4. Copy で CSS をコピー —— 等しい角は最短の略記に自動マージされます。

よくある用途

• カードやボタンのデザイン — コードを触る前にコンポーネントのスケールに合う半径を見つける。
• 略記ルールの理解 — 値が 1・2・3・4 個のとき、それぞれどの隅に対応するか直感的に把握。
• デザインカンプの再現 — デザインファイルから測った半径を正確な CSS としてチームへ共有。
• ピル型の作成 — パーセント単位を 50% まで上げて、両側が完全に丸い形状にする。

よくある質問

Q: 略記のマージはどう計算されますか？ A: 四隅が等しければ 1 値へ、対角が等しければ 2 値（左上/右下と右上/左下）へ、右上と左下が等しければ 4 値目を省略します。それ以外は 4 値のままです。

Q: 50% と 50px で見た目が変わるのは？ A: パーセント指定はボックスの辺に比例して拡大するため、横長の矩形では 50% でピル型になります。px の固定値はボックスの大きさに左右されず、常に同じ絶対サイズです。

Q: 楕円半径（スラッシュ構文）には対応していますか？ A: いいえ、このツールは単一半径形式のみ生成します。水平と垂直の半径を別々に指定したい場合は、コピーした CSS を手動で拡張してください。