border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

Gratis online border radius generator — CSS visuele editor

Maak aangepaste CSS border-radius waarden visueel. Ontwerp afgeronde hoeken, pilvormige knoppen, organische vormen en creatieve vormen met een live voorvertoning en directe CSS uitvoer.

Wat is een border radius generator?

Een border radius generator is een visueel hulpmiddel dat webontwerpers helpt bij het maken van CSS border-radius waarden zonder handmatig pixels of percentages te berekenen. In plaats van getallen te typen en je browser te vernieuwen, pas je schuifregelaars aan en zie je de vorm direct veranderen.

De CSS border-radius eigenschap rondt de hoeken van een element af. Het is een van de meest veelzijdige CSS eigenschappen — in staat om alles van subtiel afgeronde hoeken tot complexe organische vormen te maken.

Hoe gebruik je deze border radius generator

1. Kies een voorinstelling — Start met afgeronde, pilvormige, vormvormige, bladvormige, druppelvormige of morph vormen.
2. Pas de schuifregelaars aan — Beheer elke hoek afzonderlijk of koppel ze samen.
3. Stel afmetingen in — Wijzig de breedte en hoogte om overeen te komen met je element.
4. Pas kleuren aan — Stel de dooskleur en voorvertoningsachtergrond in.
5. Kopieer de CSS — Klik op de kopieerknop en plak deze in je stylesheet.

Belangrijke functies

Kenmerk	Voordelen
Individuele hoekcontrole	Stel elke hoek afzonderlijk in voor unieke vormen
Koppelen/ontkoppelen van hoeken	Schakel tussen uniforme en aangepaste hoeken
6 vormvoorinstellingen	Start snel met veelvoorkomende border-radius patronen
Breedte- & hoogtecontroles	Pas je echte elementafmetingen aan
Live voorvertoning	Zie de vorm direct bijwerken terwijl je aanpasst
Kopieer naar klembord	Eén-klik CSS export

Begrijpen van CSS border radius

De syntaxis

De border-radius eigenschap accepteert tot vier waarden, één voor elke hoek:

border-radius: top-left top-right bottom-right bottom-left;

Waardenpatroon	Invloed op hoeken
16px	Alle vier de hoeken gelijk
16px 8px	Top-left + bottom-right / top-right + bottom-left
16px 8px 4px	Top-left / top-right + bottom-left / bottom-right
16px 8px 4px 2px	Elke hoek afzonderlijk

Pixels versus percentages

• Pixels (px): Vaste hoekradius onafhankelijk van elementgrootte.
• Percentages (%): Relatief ten opzichte van de elementafmetingen. 50% op een vierkant creëert een perfecte cirkel; 50% op een rechthoek creëert een ellips.

Percentages gebruiken voor cirkels en pilla's

Een border-radius: 50% creëert een perfecte cirkel wanneer breedte gelijk is aan hoogte. Voor pilla-vormige knoppen gebruik je een grote pixelwaarde (zoals 999px) — dit zorgt ervoor dat de straal altijd groter is dan de helft van de kortere dimensie, waardoor volledig afgeronde uiteinden worden gecreëerd onafhankelijk van elementgrootte.

Vormvoorinstellingen vergelijking

Voorinstelling	Waarden	Gebruikgeval
Afgerond	16px uniform	Kaarten, modals, afbeeldingen
Pilla	999px uniform	Knoppen, labels, badges
Blob	60px 40px 70px 30px	Decoratieve elementen, hero secties
Blad	0 100px 0 100px	Organische UI-elementen, decoratieve dividers
Druppel	0 100px 100px 0	Tooltippen, callouts, pointers
Morph	30px 70px 50px 80px	Abstracte vormen, achtergronden

Reële toepassingen

Knopstijl

Creëer pilla-vormige knoppen met border-radius: 999px voor een moderne, vriendelijke uitstraling die gebruikt wordt door meeste designsystemen.

Kaartcomponenten

Subtiel afgeronde hoeken (8–16px) verzachten kaartranden en creëren visuele hiërarchie zonder afleidend te zijn.

Profielfoto's

Gebruik border-radius: 50% op vierkante afbeeldingen om cirkelvormige profielfoto's te maken, zoals gebruikelijk in sociale apps en dashboards.

Decoratieve blobs

Asymmetrische radiuswaarden op grote achtergrond-elementen creëren trendy organische blobvormen populair in moderne webontwerp.

Aangepaste tooltippen

Gebruik gemengde waarden (bijv. 8px 8px 8px 0) om een tooltip te maken met één scherpe hoek die wijst naar het activerende element.

Tips voor betere border radius

Tip	Uitleg
Blijf consistent	Gebruik dezelfde straal over je designsystem (bijv. 8px voor klein, 16px voor groot).
Gebruik relatieve eenheden	Voor responsieve cirkels gebruik je 50% in plaats van een vaste pixelwaarde.
Grote waarden voor pilla's	Gebruik 9999px of 999px om volledig afgeronde uiteinden te garanderen op elk element.
Ontkoppel voor organische vormen	Asymmetrische hoeken creëren interessante, unieke vormen.
Let op de inhoud	Zorg ervoor dat tekst en binnenininhoud niet worden afgeknipt door agressieve afgerondheid.
Combineer met transformaties	Roateer of schuif elementen met aangepaste straal voor nog creatievere vormen.

Vaak gestelde vragen

Wat gebeurt er als border-radius groter is dan het element?

De browser klemmt de waarde aan op de helft van de korte dimensie. Dus een border-radius: 999px op een 60px-hoogte knop wordt effectief 30px, waardoor een perfecte pilla-vorm ontstaat.

Kan ik verschillende horizontale en verticale stralen gebruiken?

Ja. De border-radius korte notatie ondersteunt een alternatieve syntaxis: border-radius: 50px / 25px stelt horizontale en verticale stralen apart in, waardoor ellipsvormige hoeken worden gecreëerd. Deze generator richt zich op uniforme stralen per hoek.

Hoe maak ik een cirkel?

Stel border-radius: 50% in op een vierkant element (gelijke breedte en hoogte). Als het element niet vierkant is, krijg je een ellips.

Beïnvloedt border-radius het layout?

Nee. border-radius beïnvloedt alleen de vorm van het element, niet het layout.

Kan ik border-radius gebruiken op inline-elementen?

Ja, maar het werkt het beste op block-elementen. Voor inline-elementen zoals <span> kan het soms onverwachte resultaten geven.