CSSボーダー半径ジェネレーター - CSSボーダーの作成とカスタマイズ

CSS border-radius について

このジェネレーターは top-left、top-right、bottom-right、bottom-left の順で 1 つの border-radius 宣言を出力します。すべての角を連動させることも、個別に調整して px または percent 単位でコピーすることもできます。

背景色とボックス色は、形状を調整するときに丸みを見やすくするためだけのものです。コピーされるコードは border-radius プロパティのみなので、既存のボタン、カード、コンポーネントスタイルに余計な色ルールなしで貼り付けられます。

このテーマに関するよくある疑問と回答をまとめました。

各コーナーに異なる半径を設定できますか？

はい、左上・右上・右下・左下の各コーナーを個別にカスタマイズできます。「すべてのコーナー」で一括設定も可能です。

どの単位がサポートされていますか？

ピクセル（px）とパーセンテージ（%）の両方に対応。パーセンテージを使えば、円（50%）やピル型などレスポンシブなシェイプを作成できます。

円やピル型のシェイプを作成できますか？

はい、正方形要素ですべてのコーナーを50%に設定すると完全な円に、長方形要素で大きなピクセル値を使うとピル/カプセル形状になります。

データはサーバーに送信されますか？

いいえ、border-radius CSSの生成はすべてブラウザ内で処理されます。半径の値はローカルで処理され、データがアップロードされることはありません。