Gratis · Ontwerp en CSS
Squircle-hoekengenerator (CSS corner-shape).
Maak zachte iOS-achtige hoeken met de nieuwe CSS-eigenschap corner-shape, met een clip-path- en SVG-fallback voor browsers die hem nog niet ondersteunen.
Loading the calculator…
Zo gebruik je deze tool: Squircle-hoekengenerator (CSS corner-shape)
Voer gegevens in of kies een bestand. Pas de instellingen aan, maak het resultaat en controleer het voordat je het kopieert of downloadt.
Limieten en ondersteunde formaten
Je invoer wordt op je apparaat verwerkt.
Technische opmerkingen in het Engels
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.