CSSボーダー半径ジェネレーター
無料のオンラインCSSボーダー半径ジェネレーター。4つのコーナーすべてのborder-radiusコードを視覚化して生成します。pxと%単位をサポート。
リアルタイムプレビューで CSS border-radius 値を視覚的に生成。ボタン、カード、UI コンポーネントの角丸やオーガニックシェイプを簡単に作成できます。
CSSボーダー半径ジェネレーター
無料のオンラインCSSボーダー半径ジェネレーター。4つのコーナーすべてのborder-radiusコードを視覚化して生成します。pxと%単位をサポート。
このツールについて
リアルタイムプレビューで CSS border-radius 値を視覚的に生成。ボタン、カード、UI コンポーネントの角丸やオーガニックシェイプを簡単に作成できます。
半径設定
ボックスプロパティ
背景色
ボックス色
半径設定
px
左上 (10px)
右上 (10px)
右下 (10px)
左下 (10px)
出力はこちらに表示されます...
プレビュー
CSSコード
半径設定
ボックスプロパティ
背景色
ボックス色
半径設定
px
左上 (10px)
右上 (10px)
右下 (10px)
左下 (10px)
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
各コーナーに異なる半径を設定できますか？
はい、左上・右上・右下・左下の各コーナーを個別にカスタマイズできます。「すべてのコーナー」で一括設定も可能です。
どの単位がサポートされていますか？
ピクセル（px）とパーセンテージ（%）の両方に対応。パーセンテージを使えば、円（50%）やピル型などレスポンシブなシェイプを作成できます。
円やピル型のシェイプを作成できますか？
はい、正方形要素ですべてのコーナーを50%に設定すると完全な円に、長方形要素で大きなピクセル値を使うとピル/カプセル形状になります。
データはサーバーに送信されますか？
いいえ、border-radius CSSの生成はすべてブラウザ内で処理されます。半径の値はローカルで処理され、データがアップロードされることはありません。