Border-radius-generator

Een border-radius-declaratie kan tot vier onafhankelijke hoekwaarden bevatten plus een optionele syntax met acht waarden en een schuine streep voor organische curven — meer bewegende delen dan de meeste mensen beseffen totdat ze iets anders nodig hebben dan een eenvoudige afgeronde kaart. Deze generator zet elk van die onderdelen op het scherm: vier hoeksliders met elk hun px- of procenteenheid, een 'alle hoeken koppelen'-shortcut voor symmetrische vormen, en een blob-modus voor vormen die geen enkele enkele radiuswaarde kan uitdrukken.

Hoeken-modus dekt de vormen die mensen daadwerkelijk gebruiken: koppel elke hoek aan één slider voor perfecte cirkels, pillen en squircles, of ontkoppel ze om alleen de bovenkant van een dropdownpaneel of slechts één kant van een kaart af te ronden. Een dambord-preview achter de vorm, schakelbaar tussen een lichte en donkere achtergrond, maakt direct duidelijk welke hoeken bij welke radius worden afgeknipt — hetzelfde visuele trucje dat bestandstools op deze site gebruiken om transparantie te tonen.

Blob-modus is de andere helft: met de CSS-syntax met acht waarden en een schuine streep kunnen de horizontale en verticale radii van elke hoek van elkaar verschillen, wat een afgeronde rechthoek verandert in een organische, onregelmatige omtrek. Klik op Randomiseer voor telkens een nieuwe vorm en kopieer de exacte CSS erachter — geen SVG-export of externe library nodig. Vooraf ingestelde pagina's dekken de verzoeken die mensen daadwerkelijk in een zoekbalk typen: een perfecte cirkel, een stadionvormige pilknop, een squircle in iOS-stijl en een kant-en-klare organische blob.

Zoals elke tool op deze site draait deze volledig in je browser: geen upload, geen account, en de generator blijft offline werken zodra de pagina is geladen.