CSS corner-shape generator: squircles with a fallbackYour browser doesn't support corner-shape yet. So the enhanced preview below is generated with clip-path, just to show you the shape you're designing. Switch to Fallback and you'll see what this browser really gets from the generated CSS.Preview<br>EnhancedFallback

The corner-shape property is used to modify the shape of rounded corners created by the border-radius property and its associated longhands<br>border-radius: 1rem;corner-shape: squircle;<br>Controls<br>Size and text →Preview textClear<br>The corner-shape property is used to modify the shape of rounded corners created by the border-radius property and its associated longhands<br>SizeAspect ratioPaddingFont size

Corner shapesAllIndividual<br>PresetsNotchScoopBevelRoundSquircleSquare<br>SuperellipseRadius<br>top-leftPresetNotchScoopBevelRoundSquircleSquare<br>SuperellipseRadiustop-rightPresetNotchScoopBevelRoundSquircleSquare<br>SuperellipseRadiusbottom-rightPresetNotchScoopBevelRoundSquircleSquare<br>SuperellipseRadiusbottom-leftPresetNotchScoopBevelRoundSquircleSquare<br>SuperellipseRadius

Copy CSSCopied!<br>Exact fallbackSelectorUnitrempx