border-radiusジェネレーター

各コーナーのborder-radiusを個別に設定して、その場で形の変化を確認しながらCSSをコピーできます。

すべてのコーナーを連動

          
        

よくある質問

1つのborder-radius値を設定するだけと何が違いますか?

1つの値では4つの角すべてが同じ丸みになります。このツールでは各コーナーを個別に設定できるため、上の角だけ丸めたカードや、非対称な「ブロブ」形状などの表現に便利です。

単位は何を使っていますか?

ピクセルです。要素サイズに関わらず正円/正楕円になるパーセンテージ指定のradiusが必要な場合は、生成されたCSSの各値を手動でpxから%に置き換えてください。

この内容はどこかに送信されますか?

いいえ、プレビューとCSSはすべてブラウザ内で生成されます。何もアップロードされません。