CSS角丸ジェネレーター
全コーナー 8px
CSS出力
border-radius: 8px;
使い方
- スライダーを調整するか値を入力して、各コーナーの角丸を設定します。
- 「コーナーを連動」を切り替えると、全コーナーを一括または個別に変更できます。
- 単位（px、%、rem、em）を選択します。
- リアルタイムでプレビューが更新されます。
- コピーボタンで生成されたCSSをコピーできます。
CSS角丸とは
CSSのborder-radiusプロパティは、要素の外枠の角を丸くします。1つの値で均一な角丸を作ったり、各コーナーを個別に指定して非対称な形状を作れます。ボタン、カード、アバター（50%で円形）、装飾的なUI要素などで広く使われています。
構文ガイド
- 値1つ（例：8px）：4つのコーナーすべてが同じ値になります。
- 値4つ（例：10px 20px 30px 40px）：左上・右上・右下・左下の順（時計回り）。
- パーセント（例：50%）：要素の寸法に対する相対値。正方形に50%を指定すると円になります。
活用シーン
- ボタン：ピル型やソフトな角丸を適用して、クリックしやすいボタンを作成。
- アバターとプロフィール画像：正方形画像にborder-radius 50%を適用して、完全な円形のユーザーアバターを作成。
- カードとコンテナ：カードの端に控えめな角丸（4-8px）を追加して、モダンで親しみやすい外観に。
- モーダルとダイアログ：オーバーレイパネルの角を丸くして、ページコンテンツとの視覚的な区別を明確に。
- タグとバッジ：カテゴリ、ステータス表示、通知数などの角丸ラベルを作成。
デザインのコツ
- デザインシステム全体で一貫したborder-radius値を使用しましょう（例：小要素4px、カード8px、円形50%）。
- 同じページで異なる半径値を多用しすぎると、統一感のない印象になるため注意しましょう。
- レスポンシブレイアウトでは、フォントサイズに連動してスケーリングされるremやem単位の使用を検討しましょう。
- 長方形に大きなborder-radiusを指定するとピル型に、正方形に指定すると円形になります。
- コードに反映する前に、ブラウザの開発者ツールでborder-radiusの値をリアルタイムで試すのも効果的です。
プライバシー
すべての処理はブラウザ内で完結します。データがサーバーに送信されることはありません。
よくある質問
border-radiusとborder（枠線）は何が違いますか？
border-radiusは要素の角の丸み（曲率）を指定するプロパティで、枠線の太さや色を決めるborderとは別物です。本ツールが生成するのはborder-radiusの値のみです。
生成したCSSはどこかに送信されますか？
いいえ。プレビューもCSSの生成もすべてブラウザ内で完結し、入力値や生成結果がサーバーに送信・保存されることはありません。
px、%、rem、emはどう使い分けますか？
pxは固定の丸み、%は要素サイズに対する相対値（正方形に50%で円形）、remやemはフォントサイズに連動してスケールします。レスポンシブにはremやemが便利です。
各コーナーを別々の値に設定できますか？
はい。「コーナーを連動」をオフにすると、左上・右上・右下・左下を個別に指定して非対称な形状を作れます。
楕円のような角丸（水平/垂直で異なる半径）も作れますか？
本ツールは各コーナーに単一の半径を設定する方式です。スラッシュ区切りで水平・垂直を別々に指定する楕円コーナーには対応していません。