CSS 角丸生成ツールとは？

無料のオンライン CSS 角丸生成ツール。4つの角の半径をビジュアルコントロールで調整。

CSSのborder-radiusプロパティは要素の角の丸みを制御し、その汎用性は単純な角丸矩形をはるかに超えています。各角を個別に調整することで、ピル型、円、非対称形状、複雑な有機的な形状まで、単一のCSSプロパティで作成できます。CSS Border Radius Generatorは、4つの角すべてを個別のスライダーで制御でき、ライブプレビューが即座に更新されます。

各角（左上、右上、右下、左下）にそれぞれスライダーがあり、完全に非対称な形状を作成できます。ピクセル（px）とパーセント（%）の間の単位切り替えは、動作を大きく変えます。ピクセル値は固定半径の角を作成し、要素の寸法に関係なく同じサイズのままです。パーセント値は半径を要素のサイズに結び付け、これが正円を作成する方法です（正方形のborder-radius: 50%）。

4つのプリセットが最も一般的なユースケースをカバーします。Circleは完全な正円のためのborder-radius: 50%を作成します（非正方形要素では楕円）。Pillは両端が完全に丸い形状（border-radius: 9999px）を作成し、ボタンのバッジやタグに便利です。Cardはカードコンポーネントやコンテナに適した控えめな8pxの丸みを適用します。Roundedはすべての角に8pxの丸みを適用し、ボタンやフォーム入力に適しています。

生成されたCSSコードは短縮構文を表示します。4つの角すべてが同じ値の場合は単一の値（例：border-radius: 8px）を出力します。角が異なる場合は、時計回りの順序（左上、右上、右下、左下）で4つの値の構文を出力します。コードはスタイルシートに貼り付けるだけで使えます。