Border Radius ジェネレーター

数値を当てずに角の丸みを調整

border-radius は簡単そうに見えて、ただの角丸四角形以上の形を作ろうとすると意外に調整が大変です。このジェネレーターなら各コーナーを視覚的に動かしながら結果を確認できるので、ボタン、カード、入力欄などの微調整がしやすくなります。

このツールで調整できること

border-radius の代表的な使い方をすばやく試せます。

• すべての角に同じ値を使う
• 各角に別々の値を設定する
• px と % を切り替える
• よくある形をプリセットから選ぶ

こんな場面で便利です

このツールは次のようなときに役立ちます。

• 既存のデザインシステムに近づけたいとき
• ピル型、円形、より有機的な角形を試したいとき
• ボタンやカード用の再利用しやすい CSS を作りたいとき
• devtools での試行錯誤を減らしたいとき

単位の違いで見え方も変わります

px は固定の丸みになり、% は要素サイズの影響を受けやすくなります。あるコンポーネントではちょうどよくても別の場所では違和感があるなら、単位を切り替えて見比べるのがおすすめです。