CSS border-radiusジェネレーター
左上・右上・右下・左下の4つの角の丸みを調整すると、プレビューと生成されるCSSがリアルタイムに更新されます。「4隅を連動させる」を有効にすると1つの数値で4隅すべてをまとめて操作でき、無効にすると角ごとに個別の値を指定できます。単位はpx（ピクセル）と%（要素サイズに対する割合、正円・楕円のボタンやアイコンに便利）を切り替えられます。生成されたborder-radius宣言はコピーボタンでそのままクリップボードにコピーできます。影を付けたい場合は CSS box-shadowジェネレーター もあわせてご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
角の丸み
プレビュー
注意事項
- 単位を切り替えると、既存の入力値は新しい単位の上限（px: 500、%: 50）に合わせてクランプされます。
- %指定は要素の幅・高さに対する割合です。4隅すべてを50%にすると、正方形の要素は円に、長方形の要素は楕円になります。
- CSSの仕様上、`border-radius`は`左上 右上 右下 左下`の順で指定します。4隅がすべて同じ値の場合は単一の値に短縮されます。
用語解説
border-radius
要素の角を丸めるCSSプロパティ。4隅の値を空白区切りで指定すると`左上 右上 右下 左下`の順で適用され、1つの値だけ指定すると4隅すべてに同じ値が適用される。
px（ピクセル）
画面上の絶対的な長さを表す単位。要素のサイズが変わっても角の丸みの大きさは固定される。
%（パーセント）
要素の幅・高さに対する相対的な割合を表す単位。要素のサイズが変わると角の丸みもそれに応じて拡大・縮小する。
よくある質問
円や楕円を作るにはどうすればよいですか？
正方形の要素なら、角丸を50%にすると円になります。長方形では50%で楕円になります。px指定では要素の半分以上の値を入れても、見た目は最大の丸みに収まります。
4つの角を別々の値にできますか？
はい。「4隅を連動させる」を無効にすると、左上・右上・右下・左下の値を個別に指定できます。4隅がすべて同じ値のときは、CSSも単一値に短縮して出力されます。
生成したCSSはどう使いますか？
生成されたborder-radiusの行をコピーして、対象要素のスタイルに貼り付けてください。すべての主要ブラウザで追加設定なしに動作します。
このページをシェア