CSS border-radius generator
Stel de afronding voor alle hoeken tegelijk in of voor elke hoek apart, in pixels of procenten, en desgewenst elliptisch met een aparte horizontale en verticale straal. De generator schrijft de waarde in de kortst geldige vorm, toont de vier losse eigenschappen en berekent welke straal de browser bij deze afmetingen werkelijk gebruikt.
Zo wordt het berekend
Hoe de browser border-radius leest
De korte notatie accepteert één tot vier waarden in de volgorde linksboven, rechtsboven, rechtsonder, linksonder – met de klok mee. Ontbrekende waarden worden aangevuld zoals bij margin:
| Waarde | Betekenis |
|---|---|
12px | alle vier de hoeken 12 px |
24px 8px | linksboven en rechtsonder 24 px, rechtsboven en linksonder 8 px |
24px 8px 4px | linksboven 24 px, rechtsboven en linksonder 8 px, rechtsonder 4 px |
40px 10px / 20px 5px | elliptisch: horizontale stralen vóór de schuine streep, verticale erna |
De generator herleidt elke invoer tot de kortst gelijkwaardige vorm: 10px 10px 10px 10px wordt 10px, en een schuine streep met dezelfde waarden erna vervalt.
Procenten: breedte en hoogte apart
Procenten verwijzen horizontaal naar de breedte van het vak en verticaal naar de hoogte ervan. 50% maakt van een vierkant dus een cirkel, maar van een rechthoek van 240 × 160 px een ellips met stralen van 120 px en 80 px. Voor een cirkelvormige hoek op een rechthoek gebruik je pixels.
Als rondingen overlappen
Als twee aangrenzende stralen samen groter zijn dan de zijde die ze delen, schrijft de W3C-specificatie voor dat de browser alle stralen met dezelfde factor f = min(lengte van de zijde ÷ som van de twee stralen op die zijde) verkleint.
Voorbeeld “pilvorm” border-radius: 9999px op een knop van 200 × 40 px: links en rechts is de som 9999 + 9999 = 19.998 px tegenover een hoogte van 40 px, dus f = 40 ÷ 19.998 ≈ 0,002. Elke hoek krijgt 9999 × f = 20 px – precies de helft van de hoogte, waardoor de uiteinden perfecte halve cirkels zijn. “Gebruikte straal” toont deze waarden voor jouw vak.
Veelgestelde vragen
Hoe maak ik een cirkel met CSS?
Geef een vierkant element border-radius: 50%. Bij een rechthoek levert 50% een ellips op; voor afgeronde uiteinden (pilvorm) gebruik je een grote pixelwaarde zoals 9999px.
Wat betekent de schuine streep in border-radius?
Die scheidt horizontale van verticale stralen. 40px / 20px rondt elke hoek af als een kwart ellips, 40 px breed en 20 px hoog. Met tot vier waarden aan elke kant zijn dat in totaal acht waarden.
Waarom is de afronding kleiner dan ingesteld?
Omdat de rondingen anders zouden overlappen. De browser verkleint dan alle stralen met dezelfde verhouding – ook hoeken die op zichzelf zouden passen. De generator toont de factor en de werkelijk gebruikte stralen.
In welke volgorde staan de vier waarden?
Linksboven, rechtsboven, rechtsonder, linksonder – met de klok mee vanaf linksboven. De losse eigenschappen zijn border-top-left-radius, border-top-right-radius, border-bottom-right-radius en border-bottom-left-radius.
Bronnen en wettelijke basis
- css-backgrounds-3, § 4.1: W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties
- css-backgrounds-3, § 4.5: W3C – CSS Backgrounds and Borders Module Level 3: Overlapping Curves
- MDN Web Docs – border-radius
Bijgewerkt op:
Vergelijkbare tools
- CSS box-shadow generatorMaak CSS-schaduwen met schuifregelaars: lagen, verschuiving, vervaging, spreiding, transparante kleur, inset en stijlen – live preview, CSS met één klik.
- CSS gradient generatorMaak CSS-gradients: lineair, radiaal of conisch, zoveel kleurstops als je wilt, hoek en terugvalkleur – met live voorbeeld en CSS klaar om te kopiëren.
- Kleurconverter: HEX, RGB, HSL, HSV, CMYKZet kleuren om: HEX naar RGB, RGB naar HEX, HSL, HSV, HWB en CMYK. Typ elk formaat in of gebruik de kleurkiezer en kopieer het resultaat, in je browser.
- Base64 encoderen en decoderenBase64 en Base64url encoderen en decoderen met correcte UTF-8, plus URL encode/decode (percent-encoding). Duidelijke foutmeldingen, lokaal in je browser.
- Beeldverhouding berekenenBereken de beeldverhouding uit breedte en hoogte (1920 × 1080 = 16:9), vind de ontbrekende zijde, de decimale waarde, de standaardverhouding en de CSS.
- Btw-nummer controleren (formaat en controlegetal)Controleer het formaat en controlegetal van een EU-btw-identificatienummer voor alle 27 lidstaten en Noord-Ierland (XI). Lokaal, met link naar VIES.