border-radius ジェネレーター
無料オンライン border-radius ジェネレーター。8つのハンドルをドラッグするかblobプリセットを選んで、有機的なCSSシェイプを作成し、コードをすぐにコピーできます。
border-radius の8値構文とは何ですか？
border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 という構文では、スラッシュより前が各コーナーの水平方向の半径（左上・右上・右下・左下）、後が垂直方向の半径です。各方向に異なる値を指定することで、有機的なblobの形が生まれます。
生成されたCSSはどうやって使いますか？
border-radius の行をコピーして、対象要素の任意のCSSルールに貼り付けるだけです。例：.card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }。通常のCSS、Sass、Tailwind の任意値、インラインスタイルでも使えます。
blobシェイプはどこで使われていますか？
ヒーローイラスト、アバター、プロフィール画像、機能カード、ボタン、装飾背景など、現代のWebやアプリのデザインでよく使われています。
角丸はすべてのブラウザで使えますか？
はい。border-radius はChrome、Firefox、Safari、Edge、モバイルブラウザを含むすべてのモダンブラウザでサポートされており、ベンダープレフィックスも不要です。
blobの形をアニメーションできますか？
はい。border-radius はアニメーション可能なプロパティなので、CSSトランジションを追加すればシェイプ間をなめかに変形できます。例：.blob { transition: border-radius .8s ease; }。
4値構文と8値構文の違いは何ですか？
4値構文は各コーナーの水平・垂直半径を同じ値に設定するもので、ピル型や円には十分です。8値構文は水平と垂直の半径を別々に指定できるため、非対称で有機的なシェイプを作れます。
正円を作るには？
正方形の要素で8つの値をすべて50%にするか、単に border-radius: 50% を使います。円に近いプリセットから始めて調整するのもおすすめです。
入力したデータはアップロードされますか？
いいえ。このジェネレーターは純粋なCSSとJavaScriptだけでブラウザ内で完結します。ドラッグ・入力・コピーした内容がサーバーに送られることはありません。
正方形以外の要素にも使えますか？
使えますが、パーセント指定の半径は要素の寸法に相対するため、長方形では楕円形の角になり、正方形のプレビューとは見た目が異なります。生成された値を出発点として調整してください。
border-radius ジェネレーターの使い方
8 つの値を持つ border-radius は、普通の角丸矩形では表現できない楕円角の有機的な blob を作れます。ハンドルをドラッグして形を整え、完成した CSS をそのままコピー — レンダリングはすべてブラウザでリアルタイムに行われます。
- 形状の辺にある 8 つのハンドルをドラッグします。上下の辺のハンドルは水平方向の半径を、左右の辺のハンドルは垂直方向の半径を調整します。
- 6 つのプリセット四角形をクリックすると設計済みの blob から始められ、その後「水平方向の半径」「垂直方向の半径」の数値入力（各角 0～100%）で微調整します。
- 「ランダム」を押せばワンクリックで新しい有機的な形が生成され、「リセット」で既定の形状と色に戻ります。
- 「図形の色」と「背景色」で対象の配色に合わせたプレビューを確認できます。変更は即座に反映されます。
- 「CSS をコピー」を押すと、下部バーにリアルタイム表示されている border-radius 宣言をコピーできるので、任意の要素に貼り付けて使います。
正方形の要素にこの CSS を適用し overflow: hidden を組み合わせると定番の blob 見た目になります。パーセント指定ならどのサイズでも曲線が崩れず、構文のスラッシュの前が水平半径・後が垂直半径です。
関連ツール
- CSS Border Radius ジェネレーター ビジュアルCSS border-radiusジェネレーター。各コーナーを独立調整、リアルタイムプレビューでCSSコードを即座にコピー。
- CSSグラデーションジェネレーター ビジュアルに素晴らしいCSSグラデーションを作成。複数のカラーストップ、カスタム角度、位置で線形・放射・円錐グラデーションを生成。本番対応CSSコードを即座にコピー。
- CSS ボックスシャドウ ジェネレーター 無料オンライン CSS box-shadow ジェネレーター。オフセット、ぼかし、広がり、色、内側シャドウを調整して美しいシャドウをビジュアルに作成。ライブプレビューと即座にコードコピー。
- カラーパレットジェネレーター 無料オンラインジェネレーターで、美しく調和のとれたカラーパレットを即座に作成。単色、類似色、補色、三色、スプリット補色、四色モードに対応。HSLスライダーで色を微調整し、お気に入りをロックして、CSS、Tailwind、JSON、SVGとしてエクスポート。100%ブラウザベース、データがデバイスから離れることはありません。
- カラーコンバーター 無料オンラインカラーコンバーター。HEX、RGB、HSL、HSV形式をビジュアルピッカーで即座に変換。100% プライベート、ブラウザで動作。
- CSS イージング ジェネレーター 無料オンライン CSS イージング ジェネレーター。インタラクティブな曲線上で cubic-bezier の制御点をドラッグし、18 種類のプリセットから選んで、ボールのループ アニメーションで確認しながらタイミング関数を即座にコピー。
- CSS テキストシャドウ ジェネレーター 無料オンライン CSS text-shadow ジェネレーター。オフセット・ぼかし・色・不透明度を設定した複数レイヤーを重ねて、ネオンや 3D、レトロのプリセットを試せます。ライブプレビューで即 CSS コピー。
- CSS clip-path ジェネレーター 無料オンライン CSS clip-path ジェネレーター。頂点をドラッグして polygon・circle・ellipse・inset の形状を作り、ライブプレビューしながら CSS をワンクリックでコピー。