⬜ ボーダー半径ジェネレーター
CSS border-radius をビジュアルに作成。4角個別設定・8値指定・プリセット対応。リアルタイムプレビューでCSSコードを即コピー。
プリセット
CSS コード
border-radius: 0px;
border-radius-generatorとは
CSS border-radiusプロパティを視覚的に設計するツール。通常、border-radius値を手作業で入力するのは複雑ですが、このジェネレーターはドラッグ操作で四角の角を丸め、リアルタイムでプレビューを確認できます。4つの角を個別に調整でき、さらに楕円形の半径にも対応しています。
使い方ガイド
1. ツールを開くと、正方形のプレビュー領域が表示されます
2. 四角の角をドラッグして丸める量を調整します
3. または数値入力で正確に値を指定することもできます
4. 生成されたCSSコードを「コピー」ボタンで取得します
5. 自分のHTMLに貼り付けて完成です
活用シーン
・ボタンやカードのデザイン調整：Webサイトのボタンの角丸具合を微調整する際、このツールで最適な値を見つけられます
・デザイナーとの情報共有：プレビュー画面でビジュアル確認しながらCSS値を共有できるため、打ち合わせ時の意思疎通が円滑です
・複雑な楕円形の作成：8値指定モードで楕円の角丸を作成し、円形のアバター枠やメダルのようなデザインを実現できます
・プロトタイピング：本格開発前のプロトタイプ段階で、角丸の候補値を複数試行できます
知っておきたいポイント
border-radiusは最大8つの値を指定できます。最初の4つは外側の角丸を、後ろの4つは水平方向の楕円半径を制御します。このツールはそれらすべてをビジュアルで操作でき、CSSの複雑な構文を覚える必要がありません。モダンなブラウザではほぼ全て対応しており、本番環境でも安心して使用できます。
よくある質問
border-radiusとは何ですか？
border-radiusはCSSのプロパティで、要素の角を丸くします。ピクセル値やパーセンテージで丸みの大きさを指定でき、4つの角を個別に設定することも可能です。
8値指定とは何ですか？
border-radiusは各角に水平半径と垂直半径を別々に指定できます。「水平4値 / 垂直4値」の形式で記述し、楕円形の角丸を作成できます。例: border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
pxと%の違いは何ですか？
px（ピクセル）は固定値で要素サイズに関係なく同じ丸みになります。%（パーセンテージ）は要素の幅と高さに対する割合で、50%を指定すると完全な円や楕円になります。
完全な円を作るにはどうすればよいですか？
要素の幅と高さを同じにし、border-radius: 50%を指定すると完全な円になります。本ツールのプリセットから「円」を選択すると簡単に設定できます。
ブラウザの対応状況は？
border-radiusは全てのモダンブラウザ（Chrome、Firefox、Safari、Edge）で対応しています。ベンダープレフィックスは不要です。IE9以降でもサポートされています。
カプセル形状を作るにはどうすればよいですか？
横長の要素にborder-radius: 9999pxまたは要素の高さの半分を指定するとカプセル型になります。本ツールのプリセットから「カプセル」を選択できます。
アニメーションで角丸を段階的に変化させるにはどうすればいいですか？
CSS `transition` プロパティを使用してください。例えば `transition: border-radius 0.5s ease;` とすることで、0.5秒かけて滑らかに変化します。このツールで生成したコードに `transition` を追加するだけで実装できます。
複数の要素に同じ角丸設定を一括適用することはできますか？
はい、生成されたCSSコードをクラスやIDとして定義して、複数の要素に適用できます。例えば `.rounded-card { border-radius: 20px; }` とすれば、すべてのカード要素に統一できます。
border-radiusと箱のサイズが異なる場合、どのように機能しますか？
border-radius が box のサイズより大きい場合も有効です。例えば 100px × 200px のボックスに border-radius: 150px を指定しても、正しく丸くなります。ブラウザが自動的に最適化します。
負の値を使用することはできますか？
いいえ、border-radius は負の値に対応していません。ブラウザは負の値を無視します。凹んだ角を作成することはできません。
border-radius はレスポンシブデザインでどのように機能しますか？
% 値を使用すれば、画面サイズに応じて動的に変わります。例えば `border-radius: 50%;` は常に正方形またはその比率で完全な円になります。`@media` クエリと組み合わせて、ブレークポイントごとに値を変更することも可能です。
複数の色を持つ枠線と組み合わせるにはどうすればいいですか？
`border-radius` と `border` プロパティは独立して動作します。例えば `border: 3px solid red; border-radius: 15px;` とすれば、赤い枠線が角丸で表示されます。このツールで `border-radius` を生成した後、別途 `border` を追加してください。