CodeKitHubWat is deze tool?
border-radius is de CSS-eigenschap die de hoeken van een element afrondt. Handmatig geschreven neemt het vier waarden in een vaste volgorde — linksboven, rechtsboven, rechtsonder, linksonder — wat makkelijk verkeerd om gaat, zeker zodra de vier hoeken verschillen.
Deze tool haalt het giswerk eruit: verplaats een schuifregelaar, zie de hoek afronden in het live voorbeeld, en lees de exacte CSS af uit het gegenereerde codevak. Eén vergrendelknop schakelt tussen een uniforme radius (alle vier hoeken hetzelfde, het meest voorkomende geval) en vier onafhankelijke schuifregelaars voor organische, asymmetrische vormen.
Waarom gebruiken?
- Live voorbeeld werkt direct bij terwijl je sleept — geen CSS bewerken en verversen om het resultaat te zien.
- Eén klik vergrendelt het veelvoorkomende geval 'dezelfde radius op elke hoek'; ontgrendel voor pilvormige knoppen, tekstballonnen en blobvormen.
- Geeft de verkorte enkelwaarde-notatie als alle hoeken overeenkomen, of de volledige vierwaarde-notatie als dat niet zo is — in beide gevallen klaar om te plakken.
- Draait volledig in je browser. Niets wat je invoert wordt ergens naartoe verzonden.
- Gratis, geen registratie, werkt op mobiel.
Hoe te gebruiken
- Laat 'alle hoeken vergrendelen' aangevinkt en versleep een schuifregelaar om één uniforme radius voor het hele vak in te stellen.
- Vink de vergrendeling uit om elke hoek onafhankelijk te bepalen — handig voor pilvormen, druppelvormen en asymmetrische kaarten.
- Kijk hoe het voorbeeldvak live bijwerkt terwijl je elke schuifregelaar aanpast.
- Kopieer de gegenereerde CSS uit het codevak en plak die in je stylesheet.
Voorbeeld
Invoer
Linksboven: 40px, rechtsboven: 8px, rechtsonder: 40px, linksonder: 8pxUitvoer
border-radius: 40px 8px 40px 8px;Niet-overeenkomende tegenoverliggende hoeken zoals deze creëren een blaadjes- of blozeeffect — vaak gebruikt in kaart- en badgeontwerp.
px of % — welke eenheid moet ik gebruiken?
Deze generator genereert pixelwaarden, wat de juiste standaard is voor de meeste UI-werk: knoppen, kaarten en invoervelden waarbij je een vaste, voorspelbare hoekradius wilt ongeacht de grootte van het element.
Percentages gedragen zich anders — ze zijn relatief ten opzichte van de breedte en hoogte van het element zelf, dus een radius van 50% op een vierkant element geeft een perfecte cirkel, en op een niet-vierkant element een ellips. Wil je dat effect (avatars, blobvormen die met de container meeschalen), neem dan de gegenereerde CSS en vervang de px-waarden handmatig door een %-waarde — border-radius: 50% verandert bijvoorbeeld elk vierkant vak in een cirkel.
Veelvoorkomende border-radius-patronen
- Afgeronde kaart: alle hoeken gelijk, ongeveer 8–16px voor UI-componenten.
- Pilvormige knop: stel de radius in op de helft van de hoogte van het element (of gebruik gewoon 9999px, wat ongeacht de hoogte tot een volledige pilvorm wordt beperkt).
- Cirkelvormige avatar: border-radius: 50% op een vierkant (gelijke breedte en hoogte) element.
- Tekstballon: drie hoeken afgerond, één hoek scherp — zet drie schuifregelaars hoog en één op 0.
- Blaadjes-/blozevorm: tegenoverliggende hoeken gelijk, aangrenzende hoeken verschillend — bijvoorbeeld linksboven en rechtsonder beide groot, rechtsboven en linksonder beide klein.
Combineren met een schaduw
Afgeronde hoeken komen zelden alleen voor — kaarten en knoppen hebben meestal ook wat schaduw nodig voor diepte. Gebruik de Box Shadow Generator om een dropshadow af te stellen en pas beide stukjes gegenereerde CSS toe op hetzelfde element.
Veelgestelde vragen
Wat is het verschil tussen border-radius en de volgorde van de hoeken?
De CSS-verkorte notatie volgt altijd linksboven, rechtsboven, rechtsonder, linksonder in die volgorde, met de klok mee vanaf linksboven. De vier schuifregelaars van deze tool zijn zo gelabeld dat ze hiermee overeenkomen, dus je hoeft de volgorde zelf nooit te onthouden.
Kan ik verschillende eenheden voor elke hoek gebruiken?
Ja, in echte CSS kun je px, %, em en rem mixen tussen hoeken, hoewel dat in de praktijk zeldzaam is. Deze tool genereert voor de eenvoud uniforme px-waarden — verander een individuele waarde direct in je stylesheet naar % of een andere eenheid als je gemengde eenheden nodig hebt.
Waarom maakt border-radius: 50% soms een ovaal in plaats van een cirkel?
Omdat percentages onafhankelijk relatief zijn ten opzichte van elke as — de horizontale radius is een percentage van de breedte van het element, de verticale radius een percentage van de hoogte. Bij een vierkant element (gelijke breedte en hoogte) levert dat een perfecte cirkel op; bij een rechthoek een ellips.
Werkt border-radius ook op achtergrondafbeeldingen en randen?
Ja — border-radius knipt de achtergrond, rand en (in moderne browsers) de box-shadow van het element tot de afgeronde vorm. Het knipt geen overlopende onderliggende inhoud, tenzij je ook overflow: hidden instelt op het bovenliggende element.
Is er een limiet aan hoe groot de radius kan zijn?
Geen harde limiet — overschrijdt de radius de helft van de breedte of hoogte van het element, dan begrenzen browsers deze zodat de twee curven aan die zijde precies in het midden samenkomen, waardoor een vierkant een perfecte cirkel of een pilvorm wordt.
Hoe maak ik een pilvorm of een perfecte cirkel?
Voor een pil (capsule) stel je de radius in op minstens de helft van de hoogte van het element — de gangbare truc is border-radius: 9999px, wat op elke hoogte werkt omdat de browser de curve automatisch begrenst. Een perfecte cirkel vereist twee dingen: gelijke breedte en hoogte, plus border-radius: 50%.