Wat het doet
Met de border-radiusgenerator vorm je afgeronde hoeken visueel en kopieer je de kortste CSS. Gebruik één radius voor alle hoeken of een eigen radius per hoek, zet elliptische hoeken aan om elke hoek een aparte horizontale en verticale radius te geven, en zie het voorbeeld veranderen terwijl je sleept. Het werkt in px, %, rem of em, en je kunt een bestaande border-radius-waarde plakken om die te bewerken. Alles draait in je browser.
Zo gebruik je het
- Begin met een preset of houd de voorbeeldvorm.
- Kies de Eenheid. Bij wisselen worden de huidige waarden omgerekend (rem en em tellen als 16px, % is relatief aan het voorbeeldvak).
- Zet Zelfde radius voor alle hoeken aan voor één schuif, of uit om Linksboven, Rechtsboven, Rechtsonder en Linksonder apart in te stellen.
- Zet Elliptische hoeken aan voor een schuif Horizontaal en Verticaal per hoek.
- Pas de grootte van het voorbeeld aan met Breedte en Hoogte en kopieer de code uit de kaart CSS. Zet longhand-uitvoer aan als je liever vier aparte eigenschappen hebt.
Voorbeeld
.avatar { border-radius: 50%; }
.tab { border-radius: 12px 12px 0 0; }
.blob { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }Goed om te weten
- Kortste vorm. De uitvoer voegt gelijke waarden samen: vier gelijke hoeken worden één waarde, en het deel na de streep valt weg als alle hoeken cirkelvormig zijn.
- Percentages volgen het vak. Horizontale percentages gaan uit van de breedte, verticale van de hoogte, dus 50% op een rechthoek geeft een ellips, geen cirkel.
- Radii die niet passen worden samen door de browser verkleind; daarom geeft een enorme px-waarde een strakke pil.
- Kinderen en overflow. Afgeronde hoeken knippen achtergrond en rand af, maar niet de inhoud van kindelementen: voeg overflow: hidden toe om afbeeldingen in het vak af te knippen.
Veelgestelde vragen
› Wat betekent de schuine streep in border-radius?
Waarden vóór de streep zijn de horizontale radii, waarden erna de verticale. Als ze verschillen, wordt de hoek een kwart ellips in plaats van een cirkel. 50% / 30% geeft bijvoorbeeld een plattere boog dan 50%.
› In welke volgorde staan de vier hoeken?
Met de klok mee vanaf linksboven: linksboven, rechtsboven, rechtsonder, linksonder. Met minder waarden herhaalt CSS ze: twee waarden zetten linksboven/rechtsonder en rechtsboven/linksonder, drie waarden zetten linksboven, rechtsboven/linksonder en rechtsonder.
› Hoe maak ik een cirkel of een pil?
border-radius: 50% maakt van een vierkant een cirkel en van een rechthoek een ellips. Voor een pil met ronde uiteinden bij elke breedte gebruik je een heel grote lengte zoals 9999px: de browser verkleint radii die niet passen, dus de uiteinden blijven perfect rond.
› Hoe maak je blobvormen?
Blobs gebruiken acht verschillende percentages: vier horizontale en vier verticale radii, zoals 30% 70% 70% 30% / 30% 30% 70% 70%. Kies een blob-preset, zet Elliptische hoeken aan en versleep de schuifjes per hoek om de vorm aan te passen.