角丸(Border Radius)ジェネレーター

スライダーで各角を丸め、楕円モードで有機的なアメーバ形状を作成し、CSSを瞬時にコピーできます。

プリセット
角の調整
すべての角
24px
CSS
スライダーをドラッグして角を丸めます。

すべての角の描画処理はお使いのブラウザ上で行われます。ここで設定したデータがBroBroGoにアップロードされることはありません。

よくある質問

4つの角の仕組みと、pxと%の違いについて教えてください。

4つのスライダーは、時計回りに左上、右上、右下、左下の角に対応しています。ピクセル(px)指定では角が固定値で丸められます。パーセント(%)指定ではボックスのサイズに比例して丸められます。水平方向のパーセントは幅に、垂直方向のパーセントは高さに従うため、50%に設定すると正方形が正円になります。

楕円モード(elliptical mode)とは何ですか?

オフの場合、すべての角は単一の半径を持つ1/4の円になります。オンにすると、各角に個別の水平半径と垂直半径を設定できるようになり、柔らかく有機的な「アメーバ(blob)」のような形状を作成できます。ジェネレーターは自動的にスラッシュ(/)で区切られた2値形式のCSSを出力し、角が再び均等な円形に戻ると自動的に短い形式の記述にフォールバックします。

きれいな正円やカプセル型を作るにはどうすればよいですか?

角をリンクさせ、単位を「%」に切り替えて「50%」に設定すると、正方形が正円になります。カプセル型のボタンにするには、単位を「px」のままにして、角の値をボタンの高さの半分以上にドラッグします。これにより、幅が変わっても両端が完全に丸い状態を維持できます。「正円」プリセットを使用すると、ワンクリックで最初のケースを設定できます。