border-radius ジェネレーター

角を丸め、有機的なブロブ形状を作成。

定番の角丸から流行のブロブまで

4つの角モードは日常に対応：ボタン、カード、アバター。ブロブモードは8値構文を使い、イラストや装飾背景で人気の柔らかく有機的な形を作ります。

すべてブラウザ内で計算されます。画像を形に沿って切り抜くには、コンテナに overflow: hidden を追加します。

角を1つだけ丸めるには？

「4つの角」モードで、目的の角のスライダーを設定し、他は0のままにします。生成されるCSSは左上・右上・右下・左下の順に半径を並べ、すべて同じ値なら1つの値で書き出します。

8値のブロブ構文とは？

border-radius はスラッシュ「/」で区切った水平・垂直の半径を受け付けます。例えば「30% 70% 70% 30% / 30% 30% 70% 70%」は四隅に非対称な半径を与え、これがあの柔らかい有機的な形を生み出します。

なぜピクセルでなくパーセント？

パーセントは要素サイズに相対的なので、ブロブはどんな寸法でも比率を保ちます。ピクセルはボタンやカードのように一定の角を持つ固定の丸めに向いています。

border-radius は中身を切り抜く？

枠線と背景は丸めに従いますが、子要素ははみ出すことがあります。要素に「overflow: hidden」を加えると、画像や中身が角丸に沿って切り抜かれます。