Border Radius ジェネレーター
コーナーハンドルをドラッグして、8つの独立した半径で有機的な blob を彫刻。CSS / Tailwind コードをコピー。
Border Radius ジェネレーターの使い方
- プレビューボックス上の4つのコーナーハンドルを直接ドラッグして、視覚的に形を作ります。
- スライダーで微調整：各コーナーには独立した水平・垂直半径があります。
- プリセットも試してみてください。blob、リーフ、たまご、チケット形状がワンクリックで。
- デモボックスと背景色を実際のデザインに合わせると、正確なプレビューになります。
- CSS タブから border-radius 宣言をコピーするか、Tailwind クラスを取得します。
この Border Radius ジェネレーターについて
ほとんどの人は border-radius を単一の値として知っていますが、このプロパティは実際には最大8つの値を受け取ります：4つの水平半径と4つの垂直半径をスラッシュで区切ったものです（例：border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%）。このスラッシュ構文こそ、モダンなウェブデザインに溢れる有機的な「blob」シェイプの秘密です。
このジェネレーターは8つの値すべてをスライダーとドラッグ可能なコーナーハンドルとして公開し、構文を覚えなくても思い通りの形を彫刻できます。すべてのコーナーで水平・垂直半径が等しい場合、出力は自動的に標準の1〜4値記法に簡略化されます。生成コードはすべてのモダンブラウザで動作し、Tailwind タブは任意値の rounded-[...] クラスを生成します。
Border Radius のよくある質問
border-radius のスラッシュ（/）構文とは？
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% において、スラッシュの前は4つのコーナー（左上・右上・右下・左下）の水平半径、後は垂直半径です。水平と垂直の半径が異なると楕円の角になり、これが有機的な blob シェイプの基礎となります。
正円はどう作りますか？
すべてのコーナーを50%に設定します（または円プリセットをクリック）。正方形の要素では border-radius: 50% で正円に、長方形では楕円になります。パーセンテージは要素自身の幅と高さに対する相対値です。
border-radius にはパーセントとピクセルのどちらを使うべき？
パーセンテージは要素に応じてスケールし、レスポンシブな形になるため blob に最適です。ピクセルは固定の角丸サイズとなり、ボタンやカードなどサイズに関わらず一定の角丸が欲しい UI コンポーネントに適しています。このジェネレーターはパーセンテージを使用し、どんなサイズでも形の比率を保ちます。
幅の広い要素で blob が潰れて見えるのはなぜ？
パーセントの半径は要素の寸法に対する相対値です。幅400px のボックスの水平50% は200px ですが、高さ200px の垂直50% は100px です。これは期待される動作で、形はボックスに適応します。実際の要素と同じアスペクト比でプレビューしてください。
8値構文はすべてのブラウザで使えますか？
はい。楕円角のスラッシュ構文は CSS Backgrounds and Borders 仕様の一部で、すべてのモダンブラウザ（Chrome、Edge、Firefox、Safari）でプレフィックス不要でサポートされています。