CSS Border-Radius Generator
Maak visueel CSS border-radius met live voorbeeld en kopieer productieklare code.
border-radius: —;
100% privé — alles draait in je browser. Er wordt niets geüpload.
Over CSS Border-Radius Generator
De CSS Border Radius Generator maakt van alles, van zacht afgeronde kaarten tot organische blobvormen. Sleep de hoekgrepen direct op de voorbeeldweergave, of stel elke hoek numeriek in — inclusief de volledige achtwaardige syntaxis, waarbij elke hoek een eigen horizontale en verticale radius heeft. Die tweede as is wat eieren, bladeren, traandruppels en blobs mogelijk maakt.
Een link-corners-schakelaar houdt alle vier de hoeken gesynchroniseerd voor klassieke uniforme afronding, terwijl het ontkoppelen ervan elke hoek vrijmaakt voor asymmetrische vormen. Twaalf presets — rounded, pill, circle, squircle, twee blobs, leaf, egg, arch, teardrop, petal en wave — laten zien wat de eigenschap kan, en een randomize-knop genereert eindeloos nieuwe organische vormen.
Je kunt de eenheid wijzigen, het element en canvas herkleuren om bij je ontwerp te passen, en de kale border-radius-waarde of een volledige CSS-regel kopiëren. De tool is 100% client-side — er wordt niets geüpload.
Hoe gebruik je CSS Border-Radius Generator
- Sleep de hoekgrepen op de voorbeeldweergave, of schakel “Link all corners” uit om elke hoek apart te bewerken.
- Stel de horizontale en verticale radius per hoek in voor organische, blobachtige vormen.
- Kies je eenheid en pas de element- en achtergrondkleuren aan om in context te bekijken.
- Probeer de presets — pill, squircle, blob, leaf, teardrop en meer — of druk op randomize.
- Kopieer de border-radius-waarde of de complete CSS.