Generate iOS-style squircle (superellipse) shapes as clip-path
Generate iOS-style squircle (superellipse) shapes — adjust size and curvature, preview live, and copy a CSS clip-path or SVG path. Everything runs in your browser.
Need arrows, stars, or custom polygons instead? The CSS clip-path generator lets you drag points and pick from 25 shape presets.
clip-path: path('M200.00,100.00 L199.85,128.01 L199.38,139.55 L198.61,148.32 L197.52,155.59 L196.12,161.86 L194.39,167.38 L192.34,172.28 L189.95,176.67 L187.20,180.59 L184.09,184.09 L180.59,187.20 L176.67,189.95 L172.28,192.34 L167.38,194.39 L161.86,196.12 L155.59,197.52 L148.32,198.61 L139.55,199.38 L128.01,199.85 L100.00,200.00 L71.99,199.85 L60.45,199.38 L51.68,198.61 L44.41,197.52 L38.14,196.12 L32.62,194.39 L27.72,192.34 L23.33,189.95 L19.41,187.20 L15.91,184.09 L12.80,180.59 L10.05,176.67 L7.66,172.28 L5.61,167.38 L3.88,161.86 L2.48,155.59 L1.39,148.32 L0.62,139.55 L0.15,128.01 L0.00,100.00 L0.15,71.99 L0.62,60.45 L1.39,51.68 L2.48,44.41 L3.88,38.14 L5.61,32.62 L7.66,27.72 L10.05,23.33 L12.80,19.41 L15.91,15.91 L19.41,12.80 L23.33,10.05 L27.72,7.66 L32.62,5.61 L38.14,3.88 L44.41,2.48 L51.68,1.39 L60.45,0.62 L71.99,0.15 L100.00,0.00 L128.01,0.15 L139.55,0.62 L148.32,1.39 L155.59,2.48 L161.86,3.88 L167.38,5.61 L172.28,7.66 L176.67,10.05 L180.59,12.80 L184.09,15.91 L187.20,19.41 L189.95,23.33 L192.34,27.72 L194.39,32.62 L196.12,38.14 L197.52,44.41 L198.61,51.68 L199.38,60.45 L199.85,71.99 L200.00,100.00 Z');A superellipse (iOS-style smooth corner). Apply the clip-path to any element, or copy the SVG path. Everything runs in your browser.
Get weekly dev tools and tips