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.