CSS Border-Radius ジェネレーター

ライブプレビューとコピー可能なCSSコードで角丸を視覚的に調整。

垂直半径：

px
px 
{{ cssOutput }}

border-radiusとは？

CSSプロパティ border-radius は要素の角を丸くします。4つの角すべてに均一な半径を設定したり、各角を個別にスタイリングしたりできます。ショートハンドは左上、右上、右下、左下の順に記述します。

楕円形のBorder-Radius

拡張構文 border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 を使用すると、各角に水平と垂直の半径を定義できます。これにより楕円形のカーブが生成され、より有機的な形状を作れます。

よくある使用例

  • 円形：正方形の要素に border-radius: 50% を適用。
  • ピル型：丸みのあるボタンに border-radius: 9999px を使用。
  • カード：モダンなカードデザインに border-radius: 8px から 16px。
  • ブロブ形状：有機的な形状のために異なる水平・垂直半径を使用。