CSS border-radius-generator
border-radius lijkt eenvoudig, totdat je probeert uit te leggen waarom 50% op een vierkant een cirkel oplevert, maar 50% op een rechthoek een ovaal. Met deze generator voer je voor elk van de vier hoeken een waarde in, kies je tussen px, % en rem en kopieer je de exacte verkorte notatie die hij oplevert. Handig voor knopvormen, kaarthoeken, pilvormige knoppen (pill) en asymmetrische hoeken.
Een border-radius opbouwen
-
1
Stel elke hoek in
Voer een straal in voor de hoeken linksboven, rechtsboven, rechtsonder en linksonder.
-
2
Kies de eenheid
Pixels (vaste grootte), procent (relatief aan het element) of rem (relatief aan de lettergrootte van de root).
-
3
Genereer de CSS
Druk op Generate CSS om de verkorte notatie te maken.
-
4
Kopieer de regel
Kopieer de `border-radius`-verkorte notatie en plak die in je stylesheet.
Volgorde van de verkorte notatie
border-radius: top-left top-right bottom-right bottom-left;
Net als bij margin / padding: met de klok mee, beginnend linksboven. Weggelaten waarden spiegelen de tegenoverliggende hoek. Dus border-radius: 10px 20px; betekent 10px linksboven en rechtsonder, en 20px rechtsboven en linksonder.
Wat deze generator niet doet
Hij stelt per hoek één straal in, dus hij maakt nooit elliptische hoeken (de tweewaardige vorm met een schuine streep, zoals border-radius: 20px 10px / 5px 15px;) of uitgeschreven eigenschappen als border-top-left-radius. Heb je die nodig, schrijf de CSS dan met de hand.
Procent versus pixels
| Eenheid | Gedrag |
|---|---|
| px | Vast, schaalt niet mee met de grootte van het element |
| % | Percentage van de breedte (horizontaal) en hoogte (verticaal) van het element |
| em | Schaalt mee met de lettergrootte van het element |
| rem | Schaalt mee met de lettergrootte van de root |
50% op een vierkant element = cirkel. Op een rechthoek van 200×100 is 50% een horizontale straal van 100px plus een verticale straal van 50px = ellips.
Veelvoorkomende vormen
| Vorm | CSS |
|---|---|
| Cirkel (vierkant) | border-radius: 50%; |
| Pil (pill) | border-radius: 9999px; (elke waarde ≥ de helft van de hoogte) |
| Afgeronde kaart | border-radius: 8px; of 12px |
| Chatbubbel | border-radius: 18px 18px 0 18px; (staart rechtsonder) |
| Subtiel | border-radius: 2px; of 4px |
De regel ‘de helft van de hoogte’ voor pilvormen
Een pilvormige knop (pill) is een rechthoek waarvan de linker- en rechterkant perfecte halve cirkels zijn. Om dat betrouwbaar te bereiken, stel je border-radius in op minstens de helft van de hoogte van het element. 9999px (of een willekeurig zeer grote waarde) gebruiken is veilig, omdat de browser de straal begrenst tot de werkelijke geometrie.
Interactie met overflow
border-radius snijdt standaard alleen de achtergrond, rand en box-shadow af. Om onderliggende elementen (afbeeldingen, geneste elementen) tot de afgeronde vorm bij te snijden, voeg je toe:
overflow: hidden;
of gebruik isolation: isolate + overflow: hidden om ook stapelcontexten (stacking contexts) in te sluiten.
Toegankelijkheidsnotitie
Met border-radius zelf is er geen toegankelijkheidsprobleem, maar extreme afronding op interactieve elementen (pillen, chips) mag het aanraakdoel niet verkleinen. Houd knoppen minstens 44×44px (WCAG-aanbeveling), ongeacht de afronding van de hoeken.
Veelgestelde vragen
Omdat een procentuele border-radius horizontaal wordt gemeten als ‘% van de breedte’ en verticaal als ‘% van de hoogte’, op een niet-vierkant element levert dat een ellips op. Voor een cirkel moet het element vierkant zijn, of gebruik je pixelwaarden die passen bij de afmetingen van het element.
Standaard alleen de achtergrond, rand en box-shadow. Onderliggende elementen worden niet bijgesneden, tenzij je ook overflow: hidden aan het bovenliggende element toevoegt.
Het is animeerbaar tussen numerieke waarden: transition: border-radius 200ms; werkt voor pixels en percentages. Animeren tussen een complexe elliptische verkorte notatie en een eenvoudige straal kan verrassende tussenframes opleveren; test en vereenvoudig de begin- en eindtoestand als het er vreemd uitziet.
De specificatie stelt geen bovengrens, maar browsers begrenzen de effectieve straal tot de helft van de kortste zijde van het element. border-radius: 9999px op een 40px hoge knop levert een pil op, de browser begrenst dit stilletjes tot 20px.
Gerelateerde tools
ASCII-tabelreferentie
Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.
HTML-tekenreferentie
Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.
Sneltoetsenoverzicht
Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.
HAR-bestandsviewer
Open HAR-netwerkopnamen lokaal, filter verzoeken, bekijk gemaskeerde headers en timing en exporteer opgeschoonde samenvattingen zonder upload.
ASCII naar binair-converter
Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.
Willekeurige lettergenerator
Genereer willekeurige A-Z-letters. Kies het aantal, gebruik hoofdletters, kleine letters of gemengd, en gebruik de uitkomst voor spelletjes, opdrachten of lesactiviteiten.