CSS Border Radiusジェネレーター

各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。

967回閲覧

すべての角を連動

単位

左上: 24

右上: 24

右下: 24

左下: 24

CSSコード

border-radiusプロパティとは

短縮形の順序はborder-radius: 左上右上右下左下です。pxは固定の丸みを与え、%は要素のサイズに合わせて拡大縮小します — 正方形に50%を指定すると正円になります。不均等な値を組み合わせると、現代的なヒーローセクションでよく使われる有機的な「ブロブ」形状を作れます。

円やピル型はどうやって作りますか？

正方形の要素にborder-radius: 50%を指定すると円になります。長方形の要素に大きな固定値（例: 999px）を指定するとピル型になります。

pxと%、どちらを使うべきですか？

カードやボタンのように、どのサイズでも角の丸みを同じに見せたい場合はpxを使います。円やブロブのように、要素のサイズに合わせて丸みを拡大縮小させたい場合は%を使います。