CSS Border Radius ジェネレーター
Border-radiusをビジュアルでデザインし、すぐに使えるCSSコードを取得
Border Radius コントロール
ライブプレビュー
CSS出力
使用例
完全な円
全ての角に50%のborder radiusを適用して、完全な円形要素を作成します。
ピル形状
大きな水平border radius値でピル形状のボタンをデザインします。
オーガニック形状
各角に異なる値を設定して、ユニークなオーガニック形状を作成します。
機能
ライブビジュアルプレビュー
スライダーを調整するとborder radiusエフェクトがリアルタイムで更新されます
個別の角コントロール
各角を個別に調整するか、すべてをリンクして均一なborder radiusを設定
プリセット形状
円、ピル、角丸長方形、カスタムなどの一般的な形状にすばやくアクセス
プライバシー優先
すべてブラウザ内で実行 — データはサーバーに送信されません
使い方
角を調整
スライダーを使って各角のborder radiusを設定するか、リンクモードで均一な値を設定します。
形状をプレビュー
半径の値を変更すると、ライブプレビューボックスが即座に更新されます。
CSSをコピー
CSSコピーボタンをクリックして、生成されたborder-radiusコードをクリップボードにコピーします。
よくある質問
このツールでできること
このborder-radiusジェネレーターを使えば、CSS要素の角丸をビジュアルで設計できます。スライダーをドラッグしてリアルタイムでプレビューを確認し、生成されたCSSコードをワンクリックでコピー。スタイルシートで値を推測する必要はもうありません。
CSSのborder-radiusの仕組み
CSSのborder-radiusプロパティは、各角にピクセル、パーセント、emの値を指定できます。ショートハンド（border-radius: 10px）で4つの角を一括設定するか、個別に制御できます。パーセント値は要素の寸法に対する相対値なので、正方形で50%を指定すると円になります。
プリセット形状とカスタムデザイン
円、ピル型、角丸長方形のプリセットですぐにデザインを始められます。各角に異なる値を設定すれば、モダンなUIデザインで人気のあるオーガニックな非対称シェイプも簡単に作成できます。
すべてのモダンブラウザに対応
border-radiusプロパティはChrome、Firefox、Safari、Edgeなどすべての主要ブラウザでサポートされています。このツールが生成するショートハンド構文は最も互換性の高い形式なので、ベンダープレフィックスなしでそのままプロジェクトに貼り付けられます。