CSS Border Radius Generator — Afgeronde Hoeken Online

Border Radius Generator

Alle hoeken: 16px

Instellingen

Eenheid

Voorbeeldgrootte: 200px

Achtergrondkleur

CSS-code

Border Radius Bibliotheek

Basisvormen

Voorbeeld	Naam	Waarde
	Vierkant	`0px 0px 0px 0px`
	Cirkel	`50% 50% 50% 50%`
	Lichte afronding	`4px 4px 4px 4px`
	Zachte afronding	`8px 8px 8px 8px`

UI-elementen

Voorbeeld	Naam	Waarde
	Standaardknop	`6px 6px 6px 6px`
	Afgeronde knop	`24px 24px 24px 24px`
	Standaardkaart	`12px 12px 12px 12px`
	Modaal venster	`16px 16px 16px 16px`

Organische vormen

Voorbeeld	Naam	Waarde
	Organische blob 1	`30% 70% 70% 30%`
	Organische blob 2	`60% 40% 60% 40%`
	Zachte blob	`40% 60% 40% 60%`
	Golfvorm	`50% 50% 20% 80%`

Speciale effecten

Voorbeeld	Naam	Waarde
	Horizontale pil	`100px 100px 100px 100px`
	Badgevorm	`12px 12px 12px 12px`
	Tagvorm	`4px 12px 12px 4px`
	Tekstballon	`12px 12px 12px 0px`

Border Radius Gids

Border-radius eenheden

px (pixels) — vaste grootte, onafhankelijk van elementafmetingen
% (procent) — relatieve grootte, 50% maakt een cirkel/ellips
em — relatief aan de lettergrootte van het element
rem — relatief aan de root-lettergrootte, consistent in het hele project

Border-radius syntaxis

Eén waarde — alle 4 hoeken: border-radius: 10px;
Twee waarden — linksboven/rechtsonder en rechtsboven/linksonder: border-radius: 10px 20px;
Drie waarden — linksboven, rechtsboven/linksonder, rechtsonder: border-radius: 10px 20px 30px;
Vier waarden — linksboven, rechtsboven, rechtsonder, linksonder: border-radius: 10px 20px 30px 40px;

Gebruikstips

Voor knoppen gebruik 4-8px voor een zacht uiterlijk
Voor inhoudskaarten is 8-16px optimaal
De cirkelvorm (50%) werkt alleen op vierkante elementen
Grote waarden (100px+) maken een pilvorm
Verschillende waarden per hoek maken organische vormen
Gebruik % voor responsive organische vormen

Border Radius Toepassingen

UI-componenten en interfaces

Border-radius is het primaire hulpmiddel voor het maken van moderne UI-elementen met zachte afgeronde randen in plaats van scherpe hoeken.

Voorbeelden:

Knoppen met afgeronde hoeken voor betere gebruikersinteractie
Inhoudskaarten met zachte afronding voor visueel comfort
Modale vensters en dialogen met afgeronde hoeken
Invoervelden en formulieren met afgeronde randen
Badges en tags met pileffect
Gebruikersavatars in cirkelvorm (50%)

Responsive design en mobiele UI

Afgeronde hoeken verbeteren de tastbeleving op touchscreens en maken interfaces mobielvriendelijker.

Voorbeelden:

Bottom sheets en drawers met afgeronde bovenhoeken
Floating action button (FAB) in cirkelvorm
Chips en filters in pilvorm
Navigatiebalken met zachte afronding
Kaartlijsten met consistente border-radius
Toast-meldingen met afgeronde hoeken

Decoratieve en organische vormen

Complexe border-radius waarden creëren unieke organische vormen en blobs voor creatief webdesign.

Voorbeelden:

Hero-secties met blob-achtergronden
Decoratieve elementen met asymmetrische afronding
Organische vormen voor branding en identiteit
Zwevende elementen met golfvormen
Abstracte achtergronden met gevarieerde border-radius
Artistieke secties met niet-standaard vormen

FAQ

Wat is het verschil tussen px en % bij border-radius?

Pixels (px) geven een afronding van vaste grootte ongeacht de elementafmetingen. Procent (%) wordt berekend uit de elementgrootte — 50% maakt een cirkel als het element vierkant is.

Hoe maak ik een perfecte cirkel met border-radius?

Gebruik border-radius: 50% op een vierkant element (gelijke breedte en hoogte). Voorbeeld: width: 100px; height: 100px; border-radius: 50%;

Kan ik verschillende waarden instellen voor elke hoek?

Ja, border-radius ondersteunt tot 4 waarden: border-radius: 10px 20px 30px 40px; (linksboven, rechtsboven, rechtsonder, linksonder met de klok mee).

Welke browsers ondersteunen border-radius?

Alle moderne browsers ondersteunen border-radius volledig zonder voorvoegsels sinds 2011: Chrome, Firefox, Safari, Edge, Opera.

Beïnvloedt border-radius de prestaties?

Border-radius heeft vrijwel geen impact op de prestaties in moderne browsers. De rendering is GPU-versneld.

Hoe maak ik een pilvormige knop?

Gebruik een grote border-radius waarde (bijv. 100px of 999px) op een rechthoek. De browser beperkt de afronding automatisch tot het maximaal mogelijke.

CSS Border Radius Generator — Visuele Editor voor Afgeronde Hoeken

Gratis CSS border-radius generator met een intuïtieve visuele editor voor het maken van afgeronde hoeken, cirkels, organische blobs en complexe curves. Realtime voorbeeld, ondersteuning voor alle CSS-eenheden (px, %, em, rem), presetbibliotheek en CSS-code kopiëren in één klik.

CSS Border-Radius in modern webdesign

De visuele border-radius editor vereenvoudigt het maken van afgeronde hoeken zonder handmatig CSS te schrijven. De generator ondersteunt twee modi: gesynchroniseerde bewerking van alle vier hoeken en individuele hoekbesturing voor asymmetrische organische vormen.

Ondersteuning voor alle CSS-eenheden maakt de generator veelzijdig. Pixels (px) bieden vaste afronding. Procent (%) creëert responsive afronding — 50% op een vierkant produceert een perfecte cirkel.

Afgeronde hoeken voor UI-componenten

Knoppen met border-radius zijn een fundamenteel element van modern webdesign. UX-onderzoek toont aan dat knoppen met zachte afronding (4-8px) als vriendelijker en klikbaarder worden ervaren.

Inhoudskaarten met afgeronde hoeken creëren visuele hiërarchie. De optimale border-radius voor kaarten is 8-16px.

Cirkelvormen en pilknoppen

Een perfecte cirkel maken met border-radius: 50% werkt alleen op vierkante elementen. Pilvormige knoppen worden gemaakt met een grote border-radius waarde op rechthoekige elementen.

Organische vormen en blobs

Asymmetrische border-radius waarden creëren unieke organische vormen. Het combineren van verschillende waarden per hoek genereert blobvormen met vloeiende onregelmatige curves.

Technische aspecten

De border-radius syntaxis ondersteunt één tot vier waarden. Browserondersteuning is universeel sinds 2011 zonder vendor-voorvoegsels.

Prestaties en animatie

De impact op prestaties is minimaal. Afgeronde hoeken worden via GPU-compositing gerenderd. Border-radius animeren via CSS-overgangen werkt zonder prestatieproblemen.

Belangrijkste functies

✓ Twee modi — alle hoeken samen of elk individueel
✓ Realtime voorbeeld
✓ Alle eenheden — px, %, em, rem
✓ Schuifregelaars 0-200
✓ Kleurkiezer
✓ 16 presets in 4 categorieën
✓ CSS kopiëren in één klik
✓ Zonder registratie — volledige functionaliteit gratis

Maak professionele afgeronde hoeken, cirkelvormen en organische vormen voor moderne websites en apps met onze visuele online editor.

Gerelateerde rekenmachines

Kleurenpalet generator

Harmonieuze kleurenschema's voor ontwerp, websites en branding

Openen →

CSS Box Shadow Generator

Visuele schaduw-editor met meerdere lagen en CSS-code export

Openen →

CSS Verloop Generator

Visuele editor voor lineaire, radiale en conische verlopen met CSS-code export

Openen →

CSS Flexbox Generator

Visuele editor voor het maken van flexibele CSS-layouts met live voorbeeld en codegeneratie

Openen →

Disclaimer: alle berekeningen op deze site zijn bij benadering en worden ter informatie verstrekt. Resultaten kunnen afwijken van werkelijke afhankelijk van individuele omstandigheden, technische specificaties, regio, wetgevingswijzigingen, enz.

Financiële, medische, bouw-, nuts-, automobiel-, wiskundige, educatieve en IT rekenmachines zijn geen professioneel advies en kunnen niet de enige basis zijn voor het nemen van belangrijke beslissingen. Voor nauwkeurige berekeningen en advies raden we aan om gespecialiseerde professionals te raadplegen.

De site administratie draagt geen verantwoordelijkheid voor mogelijke fouten of schade gerelateerd aan het gebruik van berekeningsresultaten.