CSS Squircle Generator - Afgerond vierkant
Ontwerp de CSS-randradius visueel: vier onafhankelijke hoekschuifregelaars in px of procent, een snelkoppeling naar alle hoeken voor directe cirkels en pillen, plus een organische blob-modus met willekeurige vormen.
Resultaat
Deze pagina opent de grensradiusgenerator met alle vier de hoeken gekoppeld op 30%, een gematigde afronding die zich tussen een scherp vierkant en een volledige cirkel bevindt. Het is geen echte wiskundige cirkel (een superellips), maar het komt het dichtst in de buurt van een enkele CSS-eigenschap, en het is de waarde die de meeste ontwerpsystemen nastreven als ze die look willen.
De naam komt van de afgeronde vierkante app-pictogrammen die populair zijn geworden door iOS: genoeg ronding op elke hoek om zacht en vriendelijk aan te voelen, maar nooit zo veel dat de vorm rond lijkt. Pictogramtegels, kaartminiaturen en moderne avatarframes leunen om precies die reden allemaal op stralen in hetzelfde ruwe bereik.
Duw de gekoppelde schuifregelaar omhoog voor een zachter, ronder gevoel of omlaag voor een scherper, vierkanter gevoel: de CSS-regel wordt bijgewerkt bij elke wijziging, klaar om te kopiëren zodra de curve goed aanvoelt voor uw pictogram of kaart.