CSS-squircle-generator — Afgerond Vierkant
Ontwerp CSS border-radius visueel: vier onafhankelijke hoeksliders in px of procenten, een 'alle hoeken koppelen'-shortcut voor direct cirkels en pillen, plus een organische blob-modus met willekeurige vormen.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de border-radius-generator met alle vier de hoeken gekoppeld op 30%, een gematigde afronding die tussen een scherp vierkant en een volledige cirkel in zit. Het is geen echte wiskundige squircle (een superellips), maar het is het dichtst dat een enkele CSS-eigenschap kan komen, en het is de waarde die de meeste ontwerpsystemen gebruiken wanneer ze die look willen.
De naam komt van de afgerond-vierkante appiconen die door iOS populair zijn gemaakt: net genoeg curve op elke hoek om zacht en vriendelijk aan te voelen, maar nooit zoveel dat de vorm rond oogt. Icoontegels, kaartminiaturen en moderne avatarframes leunen allemaal op radii in ongeveer dit bereik, precies om die reden.
Beweeg de gekoppelde slider omhoog voor een zachter, ronder gevoel of omlaag voor een strakker, vierkanter gevoel — de CSS-regel werkt bij elke aanpassing bij en is klaar om te kopiëren zodra de curve goed voelt voor jouw icoon of kaart.