iOS Corner Smoothing Generator
Create authentic Figma and iOS-style squircles using Bézier-approximated G2 curvature continuity, copyable as CSS or SVG.
Presets
.squircle-box {
width: 200px;
height: 200px;
background: #6366F1;
clip-path: path('M 136 0 c 22.4021 0 33.6032 0 42.1596 4.3597 a 40.0000 40.0000 0 0 1 17.4806 17.4806 c 4.3597 8.5565 4.3597 19.7575 4.3597 42.1596 L 200 136 c 0 22.4021 0 33.6032 -4.3597 42.1596 a 40.0000 40.0000 0 0 1 -17.4806 17.4806 c -8.5565 4.3597 -19.7575 4.3597 -42.1596 4.3597 L 64 200 c -22.4021 0 -33.6032 0 -42.1596 -4.3597 a 40.0000 40.0000 0 0 1 -17.4806 -17.4806 c -4.3597 -8.5565 -4.3597 -19.7575 -4.3597 -42.1596 L 0 64 c 0 -22.4021 0 -33.6032 4.3597 -42.1596 a 40.0000 40.0000 0 0 1 17.4806 -17.4806 c 8.5565 -4.3597 19.7575 -4.3597 42.1596 -4.3597 Z');
/* Fallback vendor prefix */
-webkit-clip-path: path('M 136 0 c 22.4021 0 33.6032 0 42.1596 4.3597 a 40.0000 40.0000 0 0 1 17.4806 17.4806 c 4.3597 8.5565 4.3597 19.7575 4.3597 42.1596 L 200 136 c 0 22.4021 0 33.6032 -4.3597 42.1596 a 40.0000 40.0000 0 0 1 -17.4806 17.4806 c -8.5565 4.3597 -19.7575 4.3597 -42.1596 4.3597 L 64 200 c -22.4021 0 -33.6032 0 -42.1596 -4.3597 a 40.0000 40.0000 0 0 1 -17.4806 -17.4806 c -4.3597 -8.5565 -4.3597 -19.7575 -4.3597 -42.1596 L 0 64 c 0 -22.4021 0 -33.6032 4.3597 -42.1596 a 40.0000 40.0000 0 0 1 17.4806 -17.4806 c 8.5565 -4.3597 19.7575 -4.3597 42.1596 -4.3597 Z');
}height: 200px;
background: #6366F1;
clip-path: path('M 136 0 c 22.4021 0 33.6032 0 42.1596 4.3597 a 40.0000 40.0000 0 0 1 17.4806 17.4806 c 4.3597 8.5565 4.3597 19.7575 4.3597 42.1596 L 200 136 c 0 22.4021 0 33.6032 -4.3597 42.1596 a 40.0000 40.0000 0 0 1 -17.4806 17.4806 c -8.5565 4.3597 -19.7575 4.3597 -42.1596 4.3597 L 64 200 c -22.4021 0 -33.6032 0 -42.1596 -4.3597 a 40.0000 40.0000 0 0 1 -17.4806 -17.4806 c -4.3597 -8.5565 -4.3597 -19.7575 -4.3597 -42.1596 L 0 64 c 0 -22.4021 0 -33.6032 4.3597 -42.1596 a 40.0000 40.0000 0 0 1 17.4806 -17.4806 c 8.5565 -4.3597 19.7575 -4.3597 42.1596 -4.3597 Z');
/* Fallback vendor prefix */
-webkit-clip-path: path('M 136 0 c 22.4021 0 33.6032 0 42.1596 4.3597 a 40.0000 40.0000 0 0 1 17.4806 17.4806 c 4.3597 8.5565 4.3597 19.7575 4.3597 42.1596 L 200 136 c 0 22.4021 0 33.6032 -4.3597 42.1596 a 40.0000 40.0000 0 0 1 -17.4806 17.4806 c -8.5565 4.3597 -19.7575 4.3597 -42.1596 4.3597 L 64 200 c -22.4021 0 -33.6032 0 -42.1596 -4.3597 a 40.0000 40.0000 0 0 1 -17.4806 -17.4806 c -4.3597 -8.5565 -4.3597 -19.7575 -4.3597 -42.1596 L 0 64 c 0 -22.4021 0 -33.6032 4.3597 -42.1596 a 40.0000 40.0000 0 0 1 17.4806 -17.4806 c 8.5565 -4.3597 19.7575 -4.3597 42.1596 -4.3597 Z');