Border Radius Generator

このツールについて

border-radiusプロパティは要素のコーナーを丸くします。4つの値がすべて等しい場合は、短縮形の単一値が使用されます。異なる値は非対称な形を作ります — ピル形はすべてのコーナーに50%を使い、葉形は0%と50%を交互に使います。

コーナーの数値をクリックして直接値を入力するか、リンクされたスライダーをドラッグして4つのコーナーを一度に変更できます。すべての角をロックをオフにして各コーナーを個別に制御できます。

使い方

1. 4つのコーナー入力（左上、右上、左下、右下）に値を入力します。
2. すべての角をロックを有効にしてスライダーで4つの値を同時に設定します。
3. デザインのニーズに応じてpxと%を切り替えます。
4. プリセット（ピル、葉形、ブロブなど）をクリックして事前定義された形を即座に適用します。

活用事例

UIデザイナーはボタン、カード、アバター形状にborder-radiusを使用します。開発者はブランドデザインシステムに合わせて丸いコーナーを微調整します。ピル形（50%）はタグやバッジによく使用されます。非対称な値で装飾要素の有機的な形を作ります。

よくある質問

• pxと%の違いは何ですか？ — pxは要素サイズに関わらず固定のコーナー半径を設定します。%は要素の幅と高さに相対的です — 正方形要素のすべてのコーナーに50%を指定すると完全な円になります。
• 各コーナーに異なる半径を設定できますか？ — はい。すべての角をロックのチェックを外して各コーナー入力に異なる値を入力してください。
• 短縮出力値は何を意味しますか？ — 4つのコーナーがすべて等しい場合は単一値が出力されます。異なる場合のCSS順序は左上、右上、右下、左下です。