CSS角丸ジェネレーター

使い方

1. スライダーを調整するか値を入力して、各コーナーの角丸を設定します。
2. 「コーナーを連動」を切り替えると、全コーナーを一括または個別に変更できます。
3. 単位（px、%、rem、em）を選択します。
4. リアルタイムでプレビューが更新されます。
5. コピーボタンで生成された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の値をリアルタイムで試すのも効果的です。

プライバシー

すべての処理はブラウザ内で完結します。データがサーバーに送信されることはありません。