In dit artikel
Border-radius begrijpen
De CSS border-radius eigenschap rondt de hoeken van de buitenrand van een element af. Het accepteert één tot vier waarden om elke hoek onafhankelijk te regelen — linksboven, rechtsboven, rechtsonder en linksonder. Eén waarde past dezelfde radius toe op alle vier hoeken, terwijl vier waarden asymmetrische vormen mogelijk maken.
Border-radius werkt met elk element dat zichtbare randen, achtergronden of schaduwen heeft. Het knipt zowel de achtergrond als de rand naar de afgeronde vorm en werkt correct samen met box-shadow, outline en overflow.
Vormen maken met border-radius
Door de radiuswaarden te variëren kun je een breed scala aan geometrische vormen volledig met CSS maken. De generator laat je elke hoek visueel aanpassen en direct het resultaat zien.
- Pilvorm — stel border-radius in op 9999px om volledig afgeronde uiteinden te maken zoals een capsuleknop. Dit is het meest voorkomende UI-patroon voor tags, badges en pilvormige knoppen
- Cirkel — pas border-radius: 50% toe op een vierkant element (gelijke breedte en hoogte). Het percentage wordt berekend ten opzichte van elke dimensie, waardoor een perfecte cirkel ontstaat
- Blad- en blobvormen — stel twee tegenoverliggende hoeken in op hoge waarden en de andere twee op nul (bijv. border-radius: 60% 0 60% 0) om organische vormen te creëren
Probeer gratis — geen aanmelding vereist
Genereer Border Radius CSS →Geavanceerde elliptische hoeken
De border-radius shorthand ondersteunt een slash (/) syntax waarmee je aparte horizontale en verticale radii voor elke hoek kunt definiëren. Dit creëert elliptische curven in plaats van cirkelvormige.
- Slash-syntax — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% betekent dat de horizontale radii allemaal 50% zijn, maar de verticale radii verschillen, waardoor een eivorm ontstaat
- Individuele hoekeigenschappen — border-top-left-radius: 50px 30px stelt een elliptische hoek in met 50px horizontale radius en 30px verticale radius
- Percentagegedrag — bij percentages is de horizontale radius relatief aan de breedte en de verticale radius aan de hoogte. Dus 50% / 50% op een rechthoek creëert een ellips, geen cirkel
Veelgestelde vragen
Moet ik percentages of pixels gebruiken voor border-radius?
Gebruik percentages wanneer je wilt dat de radius mee schaalt met de elementgrootte (cirkels, ellipsen). Gebruik pixels voor consistente hoekafrondingen ongeacht grootte (knoppen, kaarten). Een veelgebruikt patroon is 8px voor UI-componenten en 50% voor avatars.
Veroorzaakt border-radius subpixel-renderingsproblemen?
Op hoge-DPI-schermen kunnen kleine border-radius waarden (1-2px) er gekarteld uitzien. Dit is het meest merkbaar bij dunne randen op achtergronden met weinig contrast. Een iets grotere radius (3-4px minimum) kan de kwaliteit verbeteren.
Hoe werkt border-radius samen met randen en outlines?
Border-radius rondt de buitenrand van de border af. Bij een dikke rand wordt de binnenradius automatisch berekend als buitenradius minus randbreedte. Outlines volgen border-radius niet in de meeste browsers. Box-shadow volgt wel de afgeronde vorm.