CSS角丸(border-radius)ジェネレーター
4つの角スライダー(px/%・楕円対応)でCSSのborder-radiusを視覚的に作成。ライブプレビューとコピー可能なコード。ブラウザ内で完結。
🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。
このツールについて
このborder-radiusジェネレーターを使えば、ボックスの角丸を視覚的に調整し、そのままのCSSをコピーできます。4つの角をまとめてスライダーで動かすことも、1つずつ個別に形作ることもでき、ピクセルとパーセントを切り替えたり、水平方向と垂直方向の値を別々に指定する楕円形の角丸を設定したりできます。操作に応じてライブプレビューが更新され、その下に貼り付けるだけのborder-radiusの記述が表示されます。値を手書きせずにボタン・カード・アバターを素早くデザインでき、すべてブラウザ内で動作します。
よくある質問
ピクセル指定とパーセント指定の角丸はどう違いますか?
ピクセル指定の角丸はボックスの大きさに関係なく一定のカーブを保つため、要素ごとに角の見た目をそろえやすくなります。一方パーセント指定はボックス自身の幅と高さに対する相対値なので、要素が大きくなれば角丸も比例して大きくなります。定番のテクニックがborder-radius: 50%で、正方形を真円に、長方形を楕円に変えられます。丸いアバターやピル形のボタンに最適です。
楕円形の角や、CSSに現れるスラッシュ(/)とは何ですか?
楕円形の角は、水平方向と垂直方向で異なる2つの半径を使うため、カーブを縦より横に広く(またはその逆に)できます。CSSではこのペアをスラッシュで区切って書き、border-radius: 40px / 20pxのように、スラッシュの前の値が水平方向の半径、後ろの値が垂直方向の半径を表します。1つの半径では作れない、柔らかく引き伸ばされた非対称の形を作れます。この構文はジェネレーターが自動で書いてくれます。
生成されたCSSはそのままプロジェクトに貼り付けられますか?
はい。標準的なborder-radiusの宣言が出力され、そのままスタイルシートに貼り付けられます。このプロパティは最新のブラウザすべてでサポートされています。ドラッグ操作に合わせてすべてがブラウザ内でローカルに計算されるため、デザインした内容がアップロードされることはなく、プレビューも生成コードも完全にあなたの端末上で作られます。ルールをコピーしてCSSに貼り付け、必要なら後から数値を調整してください。