Border Radius Generator
Genereer CSS border-radius waarden visueel. Beheer elke hoek onafhankelijk en kopieer de CSS-code.
Belangrijkste functies
- Besturing van de radius per afzonderlijke hoek
- Hoeken koppelen/ontkoppelen voor uniforme waarden
- Vooraf ingestelde vormen (pil, cirkel, blad, ticket)
- CSS-code kopiëren met één klik
Guide
De CSS border-radius-eigenschap regelt de afronding van elementhoeken. Op zijn eenvoudigst rond border-radius: 8px alle vier de hoeken af met 8 pixels. Op zijn meest complex accepteert border-radius acht waarden (vier horizontale stralen en vier verticale stralen gescheiden door een schuine streep) om asymmetrische, elliptische hoeken te creëren die organische, niet-cirkelvormige vormen produceren. Deze gids behandelt elk aspect van border-radius: syntaxis, visuele effecten, veelvoorkomende patronen, prestatieoverwegingen en ontwerptoepassingen. De basissyntaxis neemt één tot vier waarden die de straal van de cirkel van elke hoek voorstellen. Eén waarde is van toepassing op alle vier de hoeken: border-radius: 10px. Twee waarden stellen top-links/beneden-rechts en top-rechts/beneden-links in: border-radius: 10px 20px. Drie waarden stellen top-links, top-rechts/beneden-links en beneden-rechts in: border-radius: 10px 20px 30px. Vier waarden stellen elke hoek afzonderlijk in in wijzerordervolgorde beginnend vanaf top-links: border-radius: 10px 20px 30px 40px. Je kunt ook afzonderlijke hoeken targeten met longhand-eigenschappen: border-top-left-radius, border-top-right-radius, border-bottom-right-radius en border-bottom-left-radius. Percentagewaarden creëren effecten die schalen met het element. border-radius: 50% op een vierkant element produceert een perfecte cirkel. Op een rechthoekig element produceert 50% een ellips. Dit komt omdat procentwaarden relatief zijn aan de dimensies van het element: horizontale stralen zijn percentages van de breedte, verticale stralen zijn percentages van de hoogte. Een 200px bij 100px-element met border-radius: 50% heeft hoeken met 100px horizontale straal en 50px verticale straal, wat een ellips creëert in plaats van een cirkel. Deze dimensionale relatie is belangrijk om te begrijpen bij het werken met responsieve lay-outs waar elementverhoudingen veranderen op verschillende viewportgroottes. De schuine-streep-syntaxis maakt elliptische hoeken mogelijk waarbij de horizontale en verticale stralen verschillen. border-radius: 50px / 25px creëert hoeken die meer horizontaal curve dan verticaal, wat een uitgerekter, ovaal effect produceert. De volledige acht-waarden-syntaxis is: border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v, waarbij h horizontale straal is en v verticale straal. Dit niveau van controle laat je organische, blob-achtige vormen creëren die anders moeilijk te bereiken zouden zijn. Een waarde zoals border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% produceert een asymmetrische, natuurlijk uitziende vorm die vaak wordt gebruikt in modern webontwerp voor decoratieve blobs, avatar-achtergronden en sectie-scheidingslijnen. De meetkunde achter border-radius begrijpen helpt visuele resultaten voorspellen. Elke hoek van het element krijgt een ellips (of cirkel als beide stralen gelijk zijn) erin gepast. De rand, achtergrond en content worden allemaal afgeknipt tot deze afgeronde rechthoek. De ellips voor elke hoek wordt gedefinieerd door zijn horizontale straal (uitstrekkend langs de boven- of benedenrand) en zijn verticale straal (uitstrekkend langs de linker- of rechterrand). Als beide stralen gelijk zijn, is de hoek een cirkelvormige boog. Als ze verschillen, is de hoek een elliptische boog. Deze ellips visualiseren helpt je begrijpen waarom bepaalde combinaties van waarden onverwachte vormen produceren. Een perfecte cirkel creëren vereist twee voorwaarden: het element moet vierkant zijn (gelijke breedte en hoogte), en border-radius moet 50% zijn of een waarde gelijk aan half de grootte van het element. Is het element niet vierkant, dan creëert border-radius: 50% een ellips. Voor profielfoto's en avatars, verzeker je dat de container vierkant is met gelijke breedte- en hoogtewaarden, of gebruik aspect-ratio: 1 in CSS, en pas daarna border-radius: 50% toe. Overflow: hidden op de container knipt de afbeelding tot de cirkelvormige vorm. Een alternatief is clip-path: circle(50%) gebruiken, wat hetzelfde visuele resultaat produceert. Pill-vormen (stadionvormen) zijn rechthoeken met volledig afgeronde korte zijden. Pas border-radius toe met een waarde gelijk aan of groter dan half de hoogte van het element. Voor een knop die 40px hoog is, rondt border-radius: 20px de uiteinden af tot halve cirkels. Een zeer grote waarde zoals border-radius: 9999px garandeert een pill-vorm ongeacht de hoogte van het element, omdat de browser de straal kapt op half de kleinste dimensie. Deze techniek is algemeen voor tags, badges, knoppen en invoervelden in modern UI-ontwerp. De pill-vorm is de standaard knopstijl geworden in veel ontwerpsystemen, waaronder Apple's Human Interface Guidelines. Border-radius wisselwerking met verschillende andere CSS-eigenschappen op manieren die het gerenderde resultaat beïnvloeden. Rand zelf wordt beïnvloed: de randlijn volgt de afgeronde hoek en behoudt zijn breedte door de hele curve. Outline volgt border-radius niet in de meeste browsers en rendert als een rechthoek, zelfs als het element afgeronde hoeken heeft (hoewel Firefox en nieuwere Chromium-versies nu afgeronde outlines ondersteunen). Box-shadow volgt de border-radius en werpt afgeronde schaduwen die overeenkomen met de elementvorm. Overflow: hidden knipt child-content tot de afgeronde vorm, wat essentieel is voor afbeeldingen binnen afgeronde containers. Background-clip bepaalt of de achtergrond zich uitstrekt onder de rand in het afgeronde gebied. Het border-radius-renderingalgoritme lost conflicten op als de som van aangrenzende stralen de beschikbare ruimte overschrijdt. Stel je border-top-left-radius: 100px en border-top-right-radius: 100px in op een element dat slechts 150px breed is, dan tellen de twee stralen op tot 200px maar is slechts 150px beschikbaar. De browser vermindert beide stralen proportioneel om te passen. Specifiek berekent hij een schaalfactor (150/200 = 0,75) en past deze toe op beide stralen, wat resulteert in elk 75px. Deze automatische aanpassing betekent dat je grote straalwaarden kunt gebruiken zonder je zorgen te maken over overflow, hoewel het visuele resultaat kan verschillen van je intentie. Het algoritme overweegt alle vier de hoeken gelijktijdig en vindt de kleinste benodigde schaalfactor. Geneste border-radius vereist dat binnenliggende elementen kleinere stralen hebben dan hun parents om consistente visuele afstand te behouden. Heeft een kaart border-radius: 16px en padding: 8px, dan moet het binnenste contentgebied border-radius: 8px hebben (parent-straal minus padding). De formule is: binnenste straal = buitenste straal - ruimte tussen elementen. Is de ruimte groter dan de buitenste straal, dan moet de binnenste straal 0 zijn (geen afronding). Dit principe is van toepassing op kaarten die afbeeldingen bevatten, geneste containers en elke parent-child-relatie waarbij beide afgeronde hoeken hebben. Deze regel negeren creëert inconsistente ruimtebreedtes aan de hoeken die visueel verkeerd lijken, ook als je niet onmiddellijk kunt identificeren waarom. CSS-vormen en border-radius dienen verschillende doeleinden die soms worden verward. Border-radius rondt de visuele hoeken en het hit-gebied van een element af. CSS clip-path creëert willekeurige vormen door clipping (circle(), ellipse(), polygon(), path()). Voor eenvoudige afgeronde rechthoeken is border-radius performanter en makkelijker te onderhouden. Voor complexe vormen (driehoeken, zeshoeken, aangepaste polygonen) is clip-path noodzakelijk. Border-radius wordt gecomposited op de GPU en is een van de goedkoopste visuele effecten in CSS. Clip-path met complexe polygonen kan duurder zijn. De shape-outside-eigenschap gebruikt border-radius voor tekstterugloop rond afgeronde elementen, wat tijdschriftstijl-lay-outs creëert. Prestaties van border-radius zijn over het algemeen uitstekend. Afgeronde hoeken worden gerenderd door de GPU-compositor in alle moderne browsers en triggern geen layout-herberekening of herschildering tijdens animaties. Border-radius zelf animeren is ook performant omdat de browser de waarden kan interpoleren en het resultaat op de GPU kan compositen. Dit maakt border-radius geschikt voor hover-effecten (overgang van vierkante naar afgeronde hoeken) en geanimeerde elementen. De enige prestatieoverweging is wanneer border-radius wordt gecombineerd met box-shadow op veel elementen, want elke afgeronde schaduw vereist aanvullend compositing-werk. Browserondersteuning voor border-radius is universeel in alle moderne browsers zonder voorvoegsels. De -webkit-border-radius- en -moz-border-radius-voorvoegsels zijn sinds ongeveer 2012 niet meer nodig. De enige randgevallen betreffen de schuine-streep-syntaxis voor elliptische hoeken, die overal sinds IE9 wordt ondersteund. Ondersteun je extreem oude browsers (IE8), dan degradeert border-radius sierlijk: het element rendert simpelweg met vierkante hoeken. Er gaat geen functionaliteit verloren, alleen de visuele afronding. Ontwerptrends rondom border-radius cyclussen tussen extremen. De vroege jaren 2010 gaven de voorkeur aan subtiele 3px tot 5px-afronding. Midden jaren 2010 keerden ze terug naar scherpe 0px-hoeken in flat design. Het late decennium bracht zachte afronding terug met 8px tot 16px-stralen in material design en iOS-beïnvloede interfaces. De vroege jaren 2020 introduceerden super-afgeronde ontwerpen met 20px+-stralen en asymmetrische blob-vormen. Huidige trends geven de voorkeur aan middelmatige afronding (8px tot 16px) voor UI-componenten en grotere afronding (24px+) voor kaarten en containers, wat een zachte, benaderbare uitstraling creëert. De squircle-vorm (superellips), die Apple gebruikt voor zijn app-pictogrammen, heeft aan populariteit gewonnen maar vereist clip-path of SVG omdat border-radius een standaard cirkelvormige boog creëert, geen superellips. Consistente border-radius-waarden over een ontwerpsysteem creëren visuele cohesie. Definieer een schaal van straal-tokens: --radius-sm: 4px, --radius-md: 8px, --radius-lg: 16px, --radius-xl: 24px, --radius-full: 9999px. Pas deze tokens consistent toe: knoppen gebruiken --radius-md, kaarten gebruiken --radius-lg, avatars gebruiken --radius-full, kleine badges gebruiken --radius-sm. Deze systematische benadering voorkomt de visuele inconsistentie van willekeurige straalwaarden (6px hier, 10px daar, 14px ergens anders) die ontwerpen onafgewerkt laat lijken. Veel CSS-frameworks (Tailwind, Chakra UI) bevatten vooraf gedefinieerde straal-schalen om deze reden. Responsieve border-radius kan worden bereikt met clamp(), min() of media queries. Een kaart met border-radius: clamp(8px, 2vw, 24px) heeft kleinere afronding op kleine schermen en grotere afronding op brede schermen. Dit voorkomt dat grote stralen kleine elementen op mobiel domineren. Verder kun je border-radius verkleinen op mobiele breekpunten: border-radius: 24px op desktop, 12px op tablet, 8px op mobiel. Voor volledige-breedte-mobiele kaarten die schermranden raken, is het volledig verwijderen van border-radius op kleine schermen (border-radius: 0 op mobiel breekpunt) een veelvoorkomend patroon dat contentgebied maximaliseert. Border-radius met afbeeldingen vereist overflow: hidden op de container om de afbeelding tot de afgeronde vorm te knippen. Zonder overflow: hidden strekt de afbeelding zich uit voorbij de afgeronde hoeken en de afronding verschijnt alleen op de container-achtergrond. Een alternatieve benadering gebruikt de afbeelding zelf als background-image op een afgerond element. Voor <img>-elementen regelt de object-fit-eigenschap hoe de afbeelding de afgeronde container vult: object-fit: cover vult het hele gebied (bijsnijden indien nodig), terwijl object-fit: contain de hele afbeelding binnenin past (mogelijk gaten achterlatend). Beide benaderingen werken, maar overflow: hidden op een container met een child-<img> is algemener omdat het het img-element behoudt voor toegankelijkheid (alt-tekst) en SEO. Geavanceerde vorm-creatie combineert border-radius met andere CSS-eigenschappen om complexe vormen te creëren zonder afbeeldingen of SVG. Een eivorm gebruikt asymmetrische verticale stralen: border-radius: 50% / 60% 60% 40% 40%. Een bladvorm gebruikt tegenovergestelde hoekafronding: border-radius: 0 50% 0 50%. Een druppelvorm combineert border-radius op drie hoeken met een scherpe vierde hoek. Een spraakballon gebruikt border-radius op de hoofd-vorm met een pseudo-element (::before of ::after) voor de staart. Deze CSS-alleen-vormen vermijden de behoefte aan SVG of afbeeldingen voor eenvoudige decoratieve elementen, wat HTTP-verzoeken vermindert en makkelijke kleur-theming mogelijk maakt via CSS-custom-properties. Border-radius en tekstcontent wisselwerken op specifieke manieren. De tekst binnenin een afgerond element volgt de curve niet. Tekst wordt uitgelijnd in de rechthoekige contentbox en de afgeronde hoeken knippen alleen de achtergrond en rand af. Voor kleine straalwaarden is dit niet merkbaar. Voor grote straalwaarden kan de tekst nabij de hoeken extra padding lijken te hebben omdat de afgeronde achtergrond terugwijkt van de contentrand. Dit is een reden waarom elementen met grote border-radius-waarden vaak meer padding nodig hebben dan hun vierkante tegenhangers. Stel je border-radius: 24px in op een knop, dan moet de padding ten minste 12px tot 16px aan de zijden zijn, zodat tekst de gebogen rand niet visueel bevolkt. Animatie van border-radius tussen statussen creëert soepele vormovergangen. Overgang van border-radius: 0 naar border-radius: 50% op een vierkant element morpht het van een vierkant naar een cirkel. Dit effect is populair voor laad-indicatoren, hover-effecten en onthullingsanimaties. CSS transition: border-radius 0.4s ease handelt de interpolatie af. Voor meer complexe morphing (overgang tussen verschillende asymmetrische vormen met de schuine-streep-syntaxis) interpoleren CSS-transities elk van de acht waarden onafhankelijk, wat soepele tussenliggende vormen produceert. Printstylesheets en border-radius verdienen overweging voor webapplicaties die gebruikers mogelijk afdrukken. De meeste moderne browsers renderen border-radius in afdruk, maar sommige oudere versies niet. Leunt je ontwerp op afgeronde hoeken voor betekenis (niet alleen decoratie), test dan de afdrukoutput. Voor facturen, bonnetjes en andere afdrukbare documenten zijn afgeronde hoeken decoratief en hun afwezigheid in afdruk beïnvloedt de bruikbaarheid niet. Border-radius in CSS-frameworks en componentbibliotheken is gestandaardiseerd tot een op tokens gebaseerde benadering. Tailwind CSS gebruikt klassen zoals rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl en rounded-full. Bootstrap gebruikt rounded, rounded-circle, rounded-pill en rounded-0 tot rounded-5. Chakra UI gebruikt borderRadius met benoemde groottes (sm, md, lg, xl, full). Begrijpen hoe deze frameworks border-radius implementeren helpt je migreren tussen systemen en standaardinstellingen aan te passen om aan je ontwerpvereisten te voldoen. Squircles (superellipsen) zijn een vorm die eruitziet als een afgeronde rechthoek maar met een andere wiskundige curve. Apple gebruikt squircles voor iOS-app-pictogrammen. Een squircle heeft meer geleidelijke kromming bij de overgang van rechte rand naar curve, wat een zachtere uitstraling produceert dan een standaard border-radius-cirkelboog. CSS border-radius kan geen echte squircle produceren omdat het cirkelvormige of elliptische bogen gebruikt. Om een squircle in CSS te creëren, heb je clip-path met een path()-functie of een SVG-masker nodig. Het visuele verschil tussen een border-radius-afgeronde rechthoek en een squircle is subtiel op kleine groottes maar merkbaar op grotere groottes, in het bijzonder bij hoekstralen boven 20px. Containerqueries en border-radius kunnen samenwerken voor waarlijk responsief componentontwerp. Met CSS-containerqueries (@container) kun je border-radius wijzigen op basis van de containergrootte in plaats van de viewportgrootte. Een kaartcomponent met border-radius: 24px in een brede container kan overschakelen naar border-radius: 12px wanneer geplaatst in een smalle zijbalk, ongeacht de algehele paginabreedte. Deze component-niveau-responsiviteit produceert consistentere visuele resultaten dan op viewport gebaseerde media queries alleen. Border-radius in tabelelementen vereist speciale afhandeling. Standaard rondt border-radius op een <table>-element niet de hoeken van individuele cellen af. Om een tabel met afgeronde buitenhoeken te creëren, stel je border-collapse: separate (niet collapse) in op de tabel, pas je border-radius toe op het table-element en verberg je overflow met overflow: hidden. Voor individuele afgeronde cellen pas je border-radius toe op specifieke <td>- of <th>-elementen. De border-top-left-radius gaat op de eerste cel van de eerste rij, border-top-right-radius op de laatste cel van de eerste rij, enzovoort. Deze per-cel-benadering is uitgebreid maar geeft precieze controle. Timingfuncties voor transities beïnvloeden hoe border-radius-animaties aanvoelen. Een lineaire transitie produceert mechanische, robotachtige afronding. Een ease-transitie start snel, vertraagt in het midden en versnelt aan het einde, wat een natuurlijk gevoel produceert. Een ease-in-out-transitie creëert soepele acceleratie en deceleratie. Voor speelse interfaces kunnen cubic-bezier-functies bounce-achtige of veerkrachtige straalwijzigingen creëren: transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) schiet voorbij de doelwaarde voordat hij settelt. Match de timingfunctie aan de algehele animatiestijl van je interface. CSS Houdini en de Paint API openen toekomstmogelijkheden voor border-radius voorbij wat de huidige specificatie biedt. Met Houdini kun je aangepaste paint-worklets maken die elke hoekvorm tekenen die je wilt: squircles, geschulpte randen, golvende randen en andere vormen die standaard border-radius niet kan produceren. Hoewel Houdini-ondersteuning nog beperkt is (voornamelijk Chromium-browsers), vertegenwoordigt het de toekomst van aangepaste CSS-vormen. In de tussentijd bieden SVG-clip-paden en -maskers cross-browser-alternatieven voor niet-standaard hoekvormen. Border-radius testen over schermresoluties en pixeldichtheden doet ertoe omdat de rendering van gebogen randen verschilt tussen standaard (1x), Retina (2x) en hogere-dichtheid-displays. Op een 1x-display kan een 1px-rand op een afgeronde hoek getand lijken. Op een 2x-display rendert dezelfde hoek soepel omdat er meer fysieke pixels beschikbaar zijn om de curve weer te geven. Omvat je doelgroep gebruikers op lage-dichtheid-displays, test dan dat je afgeronde hoeken aanvaardbaar lijken op 1x-resolutie. Grotere straalwaarden renderen soepeler op alle dichtheden omdat de curve geleidelijker is. De border-radius-generator-tool laat je visueel elke hoek horizontale en verticale straal onafhankelijk aanpassen, het resultaat in realtime previewen en de CSS kopiëren. Dit is sneller dan waarden raden in code, in het bijzonder voor de schuine-streep-syntaxis waarbij de relatie tussen acht waarden en de visuele output niet intuïtief is. Gebruik de generator om asymmetrische vormen te verkennen, de exacte waarden te vinden die overeenkomen met je ontwerpintentie en die waarden daarna toe te passen in je stylesheet.
Veelgestelde vragen
Kan ik voor elke hoek verschillende waarden instellen?
Ja, je kunt alle vier hoeken onafhankelijk besturen: linksboven, rechtsboven, rechtsonder en linksonder.
Welke eenheden worden gebruikt?
De tool gebruikt standaard pixels (px), die je in de CSS-uitvoer naar wens kunt aanpassen.
