Generator voor afgeronde hoeken en vormen
Pas de horizontale en verticale radii van de vier hoeken aan in px of % en bekijk de vorm. Kopieer of sla de gegenereerde border-radius-CSS op. De breedte, hoogte en kleur van het voorbeeld worden niet opgenomen in de CSS.
Wat je kunt doen
Afronding aanpassen met een voorinstelling
Kies uit 8 voorinstellingen, waaronder afgeronde hoeken, een capsule en een blad, en pas de radii aan. Als je een voorinstelling selecteert, worden de radii en eenheid vervangen.
De vier hoeken verschillend afronden
Schakel ‘Dezelfde radius’ uit om de horizontale en verticale radii voor de hoeken linksboven, rechtsboven, rechtsonder en linksonder afzonderlijk in te voeren.
CSS controleren en ophalen
Genereer CSS nadat je de vorm hebt gecontroleerd. Wissel tussen verkorte notatie en afzonderlijke hoekdeclaraties, kopieer de CSS of sla die op als CSS-bestand.
Gebruiksaanwijzing
Een voorinstelling en eenheid kiezen
Voer de radii rechtstreeks in of kies een voorinstelling om te beginnen met aanpassen. Als je de eenheid wijzigt, worden de getallen niet omgerekend.
Afronding en vorm vergelijken
Voer één waarde in om voor alle hoeken dezelfde radius te gebruiken. Schakel de optie uit om per hoek te variëren en pas de horizontale en verticale waarden aan.
Zo nodig de grootte controleren
In de voorbeeldinstellingen kun je de breedte, hoogte en voorbeeldkleur wijzigen. Deze worden niet opgenomen in de CSS-uitvoer.
CSS genereren en daarna kopiëren of opslaan
Klik op ‘CSS genereren’ en kies het gewenste formaat. Genereer opnieuw als je de radii, eenheid of grootte wijzigt.
Handig wanneer je
De hoeken van kaarten en knoppen vormgeven
CSS voor paginacomponenten wilt maken door alle vier hoeken gelijk af te ronden of alleen de bovenhoeken.
Een asymmetrische afgeronde achtergrond maken
de horizontale en verticale afronding per hoek wilt wijzigen om contouren te maken die op bladeren of organische vormen lijken.
Relatie tussen radii, eenheden en weergavegrootte
Horizontaal en verticaal zijn twee richtingen van dezelfde hoek
De horizontale radius bepaalt de horizontale afronding en de verticale radius de verticale afronding. Een hoek wordt niet afgerond als een van beide waarden 0 is. Geef de vier hoeken met de klok mee op, vanaf linksboven.
% gebruikt breedte en hoogte als afzonderlijke referenties
Horizontale %-waarden zijn gebaseerd op de breedte van het element en verticale %-waarden op de hoogte. Zelfs met dezelfde getallen ziet een vierkant er anders uit dan een hoge of brede rechthoek. Met px geef je rechtstreeks een lengte op.
Te grote radii worden met dezelfde verhouding verkleind
Als de som van aangrenzende radii groter is dan de zijdelengte, worden alle 8 weergaveradii met een gemeenschappelijke factor verkleind. De invoerwaarden en gegenereerde CSS blijven ongewijzigd. Na het genereren kun je in de details de radii controleren die voor het voorbeeld zijn gebruikt.
Welke contouren met afgeronde hoeken kunnen worden gemaakt
Met border-radius worden hoeken elliptische curven. Je kunt er geen inkepingen of willekeurige veelhoeken mee maken. De squircle-voorinstelling benadert de vorm met elliptische hoeken; de wiskundige curve wordt niet exact gereproduceerd.
Veelgestelde vragen
Kan ik elke hoek een andere afronding geven?
Ja. Schakel ‘Voor alle hoeken dezelfde afronding gebruiken’ uit om de horizontale en verticale radius van elke hoek afzonderlijk in te voeren. Als je dit weer inschakelt, krijgen alle radii de horizontale radius linksboven.
Worden de getallen omgerekend als ik van eenheid wissel?
Nee. De getallen blijven behouden; alleen de eenheid verandert. Als na het wisselen van px naar % een waarde boven 100 blijft staan, voer je die opnieuw in binnen het bereik van 0–100.
Worden de grootte en kleur van het voorbeeld in de CSS opgenomen?
Nee. De uitvoer bevat alleen border-radius-declaraties. Stel de breedte, hoogte en achtergrondkleur in op de pagina of component waar je de CSS gebruikt.
Waarom heeft de weergegeven vorm kleinere afgeronde hoeken dan de radii die ik heb ingevoerd?
De browser verkleint alle weergegeven radii met dezelfde factor, zodat de hoekcurven elkaar niet overlappen. Je kunt de verkleiningsfactor en de px-waarden per hoek bekijken onder ‘Radiussen gebruikt voor weergave’.
Invoer en resultaten
- Radiussen
- Geef alle 8 waarden op in dezelfde eenheid: 0–100% of 0–9999px. Decimale waarden zijn ook toegestaan.
- Voorbeeld
- De breedte en hoogte van het voorbeeld zijn gehele getallen van 1–400px. Als de breedte niet past, kun je horizontaal scrollen binnen het veld.
- Uitvoer
- De verkorte border-radius-notatie of declaraties voor elk van de 4 hoeken. Kopieer of sla border-radius.css op.
- Niet inbegrepen
- Breedte, hoogte, achtergrondkleur en afbeeldings- of SVG-export.