Border-radius-generator
Stel elke hoek in en kopieer de CSS.
- Draait in je browser — je tekst wordt nergens naartoe gestuurd
- Geen aanmelding, geen quota, gratis te gebruiken zo vaak je wilt
Hoe het werkt
border-radius is eenvoudig totdat je drie afgeronde hoeken en één vierkante wilt, waarna iedereen de volgorde van de vier waarden moet opzoeken.
De volgorde, voorgoed
Linksboven, rechtsboven, rechtsonder, linksonder — met de klok mee beginnend linksboven. Dezelfde volgorde met de klok mee vanaf linksboven geldt ook voor de verkorte notaties van margin, padding en border, wat de moeite waard is om één keer te onthouden.
Pixels of procenten
Pixels geven dezelfde kromming, ongeacht de grootte van het element. Procenten zijn relatief ten opzichte van de eigen breedte en hoogte van het element, dus de kromming schaalt mee — en een straal van 50% op een vierkant geeft een perfecte cirkel, de standaardtruc voor ronde avatars.
De pilvorm
Een straal groter dan de helft van de hoogte van het element wordt beperkt tot precies de helft, en daarom levert border-radius: 999px betrouwbaar een pilvorm op, ongeacht de hoogte. Het is robuuster dan de juiste waarde berekenen, omdat het blijft werken als de inhoud verandert.
Wanneer hoeken er verkeerd uitzien bij geneste elementen
Een afgeronde doos in een andere afgeronde doos heeft een kleinere straal nodig voor de binnenste, verminderd met de padding ertussen, anders liggen de krommingen niet concentrisch. Het is een klein detail waardoor kaarten er goed gemaakt uitzien.
Border-radius-generator — vragen
In welke volgorde staan de vier waarden?
Linksboven, rechtsboven, rechtsonder, linksonder — met de klok mee vanaf linksboven.
Hoe maak ik een perfecte cirkel?
border-radius: 50% op een element dat precies vierkant is.
Hoe maak ik een pilvormige knop?
Gebruik een grote waarde zoals 999px. Browsers beperken die tot de helft van de hoogte, dus het werkt bij elk formaat.
Moet ik pixels of procenten gebruiken?
Pixels voor een consistente kromming; procenten als je wilt dat die meeschaalt met het element.
Werkt het overal?
Ja. border-radius wordt al ruim tien jaar zonder voorvoegsel ondersteund.