CSS 罫線半径ジェネレーター

CSS Border Radiusとは？

CSS Border Radiusジェネレーターの使い方

1. スライダーをドラッグして、各角（左上、右上、右下、左下）の半径値を設定します。
2. 角をロックを有効にすると、4つの角すべてに均一な半径が一度に適用されます。
3. プリセットボタンを使用して、シャープな四角、丸い長方形、完全な円/ピル、または斜めの曲線などの一般的な形状を瞬時に設定します。
4. ライブプレビューボックスがリアルタイムで更新されるのを確認します。
5. 生成されたCSSコードをワンクリックでコピーします。

Border Radiusプリセットの説明

• シャープ (0px) – フラットでモダンなUIカードやテーブルセル用。
• 丸み (8px) – 最も一般的なUIの慣例。ボタン、カード、モーダルで使用されます。
• ピル / 円 (999px) – バッジ、タグ、アバター画像、CTAボタン用。
• 斜め (999px / 0px 交互) – ランディングページで人気のある、クリエイティブな非対称デザイン要素用。

角のロック vs. 個別角の制御

CSS出力の理解

border-radius: 12px 12px 12px 12px;

CSS Border Radiusの一般的な使用例

• ボタン – わずかな丸み (6～8px) はクリックしやすさの認識を向上させます。
• カード & コンテナ – 12～16pxはSaaS UIの業界標準です。
• アバター / プロフィール画像 – 円形に切り抜く場合は50%または999px。
• 入力フィールド – モダンなフォームデザインのための微妙な丸み (4～8px)。
• ヒーローセクション & バナー – 視覚的な差別化のための非対称な半径。
• ツールチップ & コールアウトボックス – トリガー要素を指す1つの鋭い角。
• バッジ & タグ – ラベル、カテゴリ、ステータスインジケータのためのピル型 (999px)。

CSS Border Radiusとブラウザの互換性

WebデザインでBorder Radiusを使用するためのヒント

• デザインシステム全体で一貫した半径を使用します (例: 入力には8px、カードには12px、ピルには999px)。
• 1つのページで多くの異なる半径を混ぜすぎないでください — 視覚的な不整合が生じます。
• スケーラブルなUIの場合、ユーザーのフォントサイズに合わせて角がスケーリングされるように、`rem`または`em`の値を優先します。
• 子要素をクリッピングする場合 (例: 丸い画像カード)、`border-radius`と`overflow: hidden`を組み合わせます。
• 大きな非対称の値を使用して、モダンなランディングページのヒーローグラフィックで人気のある「オーガニックな塊」の形状を作成します。