CSS Border Radius: Vormen, Blobs en Creatieve Hoeken

Ontdek border-radius van eenvoudige afgeronde hoeken tot complexe blobvormen met de volledige 8-waarden syntaxis.

5 min leestijd CSS · Design · UI 6 secties + FAQ

CSS border-radius is veel krachtiger dan de meeste ontwikkelaars beseffen. Voorbij eenvoudige afgeronde hoeken ligt een volledige 8-waarden syntaxis voor organische vormen.

Elke hoek kan onafhankelijke horizontale en verticale stralen hebben, waarmee vloeiende, organische vormen mogelijk worden.

border-radius syntaxis (1-4 waarden)

border-radius accepteert 1 tot 4 waarden met standaard CSS-shorthand. Eén waarde: alle vier hoeken gelijk. Twee waarden: eerste voor linksboven en rechtsonder.

Gratis Tool Border Radius Generator Maak aangepaste vormen en blob-randen met live CSS-uitvoer

Shorthand en longhand

De shorthand border-radius stelt alle hoeken tegelijk in. De longhand-eigenschappen stellen individuele hoeken in: border-top-left-radius, etc.

8-waarden syntaxis voor asymmetrische vormen

De 8-waarden syntaxis gebruikt een schuine streep om horizontale en verticale stralen te scheiden: border-radius: Ah Bh Ch Dh / Av Bv Cv Dv.

Gratis Tool Box Shadow Generator Maak gelaagde CSS box-shadows met live voorbeeld

Cirkels en pillen maken

Voor een cirkel: stel border-radius: 50% in op een vierkant element. Voor een pil: stel border-radius: 9999px in op een rechthoekig element.

Blobvormen techniek

Blobvormen gebruiken de 8-waarden syntaxis met asymmetrische waarden: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.

UI-designpatronen

Veelvoorkomende border-radius patronen: 4-8px voor subtiele kaarthoeken, 12-16px voor prominente kaarten, 50% voor avatarcirkels, 9999px voor chips.

Gratis Tool Glassmorphism Generator Maak matglas UI-effecten met CSS backdrop-filter

Veelgestelde Vragen

Wat is het verschil tussen border-radius: 50% en 100%? +
Voor vierkante elementen produceren beide een cirkel. Waarden boven 50% worden door browsers behandeld als 50%.
Kan ik border-radius met percentagewaarden gebruiken? +
Ja. Percentagewaarden zijn relatief aan de afmetingen van het element.
Wat is de schuine streep in de border-radius syntaxis? +
De schuine streep scheidt horizontale stralen (ervoor) van verticale stralen (erna).
Hoe maak ik een blobvorm in CSS? +
Gebruik de 8-waarden syntaxis: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.
Heeft border-radius invloed op kindelementen? +
border-radius knipt kindelementen af als overflow: hidden is ingesteld op het ouderelement.
Kan ik border-radius animeren? +
Ja, border-radius is volledig animeerbaar met CSS transition en animation.
Welke border-radius waarde maakt een pilvorm? +
border-radius: 9999px maakt een pilvorm op elk rechthoekig element.