8つの値を使った複雑なシェイプ作成
通常のCSSの角丸指定では4つの値を使用しますが、スラッシュ（/）を挟んで水平方向と垂直方向の半径をそれぞれ4つずつ、合計8つの値を指定することで、より複雑で非対称な有機的シェイプ（Blob）を作成できます。
本ツールは、この直感的には分かりにくい8つの値の組み合わせを視覚的に操作できるジェネレーターです。スライダーを動かすだけで、ブラウザがリアルタイムに形状を描画し、必要なCSSコードを即座に生成します。計算や描画はすべてご使用のブラウザ上でローカルに処理されるため、データの送信は一切なく動作も非常に高速です。
ピクセル（px）とパーセント（%）の使い分け
形状を定義する単位として、ピクセル（px）とパーセント（%）の2種類を選択できます。ピクセル単位での指定は、要素のサイズが変わっても角の丸みが常に一定のサイズを保つため、ボタンやカードUIなどの固定デザインに適しています。
一方、パーセント（%）で指定した場合、角の丸みは親要素の幅や高さに対する割合として計算されます。これにより、レスポンシブデザインにおいて画面幅に応じて要素が伸縮した際にも、形状の比率を維持したままBlobシェイプを滑らかに変形させることが可能です。
ブラウザのレンダリング仕様と注意点
ブラウザのCSSレンダリングの仕様上、指定した半径の値が要素の辺の長さの半分を超えた場合、ブラウザ側で自動的に値が縮小（クランプ）され、不自然な重なりを防ぐようになっています。プレビュー画面はこのブラウザの標準仕様に忠実に従って描画されるため、実際のWebサイト上と同じ見た目を確認できます。
また、本ツールはCSSコードの生成に特化しており、SVGや画像ファイルとしての書き出し機能はありません。複雑なパスを必要とするベクターグラフィックではなく、あくまでHTML要素に対するCSSスタイリングの範囲内でデザインを調整する際にご活用ください。
よくある質問
8つの値を持つborder-radiusの構文はどう使えばいいですか？
<code>border-radius: 水平1 水平2 水平3 水平4 / 垂直1 垂直2 垂直3 垂直4</code> という形式で記述します。ツールで生成されたコードをそのままCSSファイルやstyle属性にコピー＆ペーストするだけで、複雑な形状を適用できます。
要素のサイズを変更すると形が変わって見えるのはなぜですか？
パーセント（%）単位を使用している場合、角の丸みは要素の幅と高さに基づいて計算されます。そのため、要素の縦横比が変わると形状自体もそれに合わせて伸縮し、見た目が変化します。
生成したBlobシェイプをCSSでアニメーションさせることは可能ですか？
はい、可能です。CSSの <code>transition</code> や <code>animation</code> プロパティを使用して、異なるborder-radiusの値の間を補間させることで、有機的にうごめくような滑らかなアニメーションを実装できます。
「Fancyモード」やランダム生成はどのような仕組みですか？
ツール内部のアルゴリズムが、水平・垂直それぞれの4つの値をランダムに組み合わせ、自然で滑らかな有機的形状（Blob）になるよう数値を自動計算しています。すべてクライアントサイドのJavaScriptで瞬時に処理されます。
生成されたCSSはすべてのブラウザで互換性がありますか？
はい。<code>border-radius</code> プロパティは、現在広く利用されている主要なすべてのモダンブラウザ（Chrome、Safari、Firefox、Edgeなど）で標準サポートされており、ベンダープレフィックスなしで安全に使用できます。
ツールの不具合や改善案はありますか。 フィードバックを送る