無料 · デザインとCSS
スクワークル角ジェネレーター（CSS corner-shape）.
新しい CSS プロパティ corner-shape で iOS 風のなめらかな角を作成。未対応ブラウザー向けに clip-path と SVG の代替も出力します。
Loading the calculator…
使い方: スクワークル角ジェネレーター（CSS corner-shape）
データを入力するかファイルを選び、設定を調整して結果を生成します。コピーやダウンロードの前に結果を確認してください。
制限と対応形式
入力内容はお使いの端末で処理されます。
英語の技術説明
corner-shape is new (Chromium first); the clip-path fallback needs a fixed size. Everything is calculated in your browser; nothing you type is uploaded.
corner-shape: superellipse(k) draws |x|^(2^k) + |y|^(2^k) = 1 in each corner (k = 2 is the squircle). The fallback samples the same curve into an SVG path.
A 48 px radius with corner-shape: squircle, plus a 240 × 240 clip-path that draws the same superellipse corners everywhere.