CSS ジェネレーター
角丸 フィレット生成ツール
直感的な visual editor で美しい CSS rounded corner を簡単に作成できます。
Blob shape、楕円形の角丸、すべての操作のリアルタイムプレビューに対応します。
単位
四隅の角丸を制御
左上隅（TL）
右上隅（TR）
右下（BR）
左下（BL）
楕円フィレット（水平／垂直半径）
水平／垂直比率を調整して elliptical effect を作成します
既定のスタイル
即時プレビュー
広い
高
CSS コード
border-radius: 16px;
機能
四隅を個別に制御
楕円フィレット
複数単位の切り替え
即時プレビュー
30種類以上のプリセットスタイル
ランダム blob 生成
ワンクリックで CSS をコピー
PNG / SVG をエクスポート
元に戻す/やり直す
レスポンシブプレビュー
リンク／分離制御
完全フロントエンドでオフライン実行
使い方
- 調整 左上、右上、右下、左下 四隅の slider または数値入力を使い、corner radius をその場で調整できます。
- クリック 🔗 リンクボタン 4 隅を同時に変更できます。link を解除すると各 corner を個別に調整できます。
- 切り替え 単位（px/%/rem/em）CSS を即時再生成します。
- 使用 楕円フィレット horizontal / vertical radius ratio を調整し、elliptical corner effect を作成します。
- 参照 既定のスタイル またはクリック ランダム形状 Get Blob Inspiration ボタン。
- 使用 light / dark / checkerboard background を切り替えて異なる効果を確認します。
- クリック CSS をコピー または PNG / SVG をダウンロード プロジェクトで使用されます。
よくある質問
CSS border-radius とは何ですか？
CSS
border-radius 要素の外枠に角丸効果を設定するためのプロパティです。1～4 個の値を指定して、左上・右上・右下・左下の各角の半径を個別に制御できます。スラッシュ（/）を使えば水平方向と垂直方向の半径を別々に指定でき、楕円形の角丸も作成できます。要素を丸くするには？
4 隅の border-radius を高さまたは幅の半分に設定するだけです。たとえば 200x200 の element なら、
border-radius: 50% または border-radius: 100px 完全な円になります。an ellipse fillet とは何ですか？
Elliptical Border Radius では、水平半径と垂直半径を個別に指定し、スラッシュ（/）で区切れます。例：
border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%。これにより asymmetric な organic shape や blob effect を作れます。the difference between px, %, rem and em とは何ですか？
px 固定のピクセル値です；% element の width/height に対する percentage です。rem フォントサイズはルート要素（html）を基準とした相対値です；em 現在の element font size に対する相対値です。percentage と組み合わせると、50% で丸みのある効果になります。
a blob shape とは何ですか？
Blob shape は、角が丸い有機的で不規則な形状です。4 隅に異なる値を設定し、楕円形 border-radius の水平／垂直比を変えることで、水滴や生物のような自然な形状を作れます。クリック ランダム button を click すると、美しい blob shape を自動生成します。
このツールは無料ですか？
はい。完全に無料で、登録も不要です。すべての処理はブラウザー内でローカル実行され、データはサーバーへ送信されません。角丸設定も外部へ送信されません。
ブラウザー互換性
Chrome 4+
Firefox 3+
Safari 3+
Edge 12+
Opera 10.5+
iOS Safari 3.2+
Android 2.1+
IE 9+
プライバシーステートメント
このツールはすべてブラウザ内で実行されます。作成したデータ、fillet 設定、図形がサーバーへ送信されることはなく、作業内容は端末内に留まります。このツールでは Cookie やトラッキングを使用しません。