CSS border-radius生成CSS Border Radius Generator
プレビュー上のハンドルをドラッグしてFancy border-radiusを自由に調整。CSSをコピー。Drag handles on the preview to shape fancy border-radius freely, then copy the CSS.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
プレビュー上の●をドラッグして形を調整（9elements Fancy Border Radius風） Drag the ● handles on the preview (9elements Fancy Border Radius style)
詳細調整（スライダー） Fine-tune (sliders)
使い方・ユースケース How to Use & Use Cases
8本のスライダーで水平・垂直方向の角丸率（%）を調整するか、プリセット（円・ブロブなど）を選びます。プレビューで形状を確認し、生成されたCSSをコピーしてスタイルシートに貼り付けられます。 Adjust eight sliders for horizontal and vertical corner radii (%), or pick a preset (circle, blob, etc.). Preview the shape and copy the generated CSS into your stylesheet.
正方形の画像を有機的なブロブ形状に見せたいとき、アイコンやカードのユニークな角丸デザインを試したいとき、Fancy Border Radius風のCSSを素早く取得したいときなどに使えます。 Use it for organic blob shapes on square images, unique rounded cards or icons, or quickly getting Fancy Border Radius–style CSS during web design.
よくある質問FAQ
8つのスライダーは何を意味しますか？What do the eight sliders mean?
前半4つが水平方向の角丸（左上・右上・右下・左下）、後半4つが垂直方向の角丸です。CSSでは「水平4値 / 垂直4値」の形式（例：30% 70% 70% 30% / 30% 30% 70% 70%）で出力されます。The first four are horizontal radii (top-left, top-right, bottom-right, bottom-left); the last four are vertical radii. Output uses the CSS slash syntax: four horizontal values / four vertical values.
通常の角丸（例：border-radius: 16px）も作れますか？Can I create a simple rounded corner (e.g. 16px)?
はい。「角丸」プリセットや、8つすべて同じ値に揃えると均一な角丸になります。本ツールは%指定です。px指定が必要な場合は生成後に単位を書き換えてください。Yes. Use the Rounded preset or set all eight sliders to the same value. This tool outputs percentages; change the unit to px manually if needed.
画像にも使えますか？Can I use this on images?
はい。生成したborder-radiusをimg要素や背景画像のコンテナに適用できます。overflow:hiddenと組み合わせると、正方形写真をブロブ形状に切り抜く見た目になります。Yes. Apply the generated border-radius to img elements or image containers. Combine with overflow:hidden for blob-shaped crops on square photos.
どのブラウザで動きますか？Which browsers support this?
モダンブラウザ（Chrome・Firefox・Safari・Edge）すべてで動作します。Works in all modern browsers: Chrome, Firefox, Safari, and Edge.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
