CSS Border Radius Generator — Afgeronde Hoeken Visueel Instellen

Border-radius bepaalt de afronding van hoeken van CSS-elementen. Onze generator laat je elke hoek afzonderlijk instellen en geeft direct de CSS-code.

Border-radius syntaxis

border-radius: 10px past alle vier hoeken aan. border-radius: 10px 20px 10px 20px is linksboven, rechtsboven, rechtsonder, linksonder. border-radius: 50% maakt een cirkel (bij vierkant element). border-radius: 50px 100px maakt een pill-vorm.

Elliptische hoeken

border-radius: 100px / 50px maakt elliptische hoeken — horizontale straal 100px, verticale straal 50px. Dit geeft afgeronde rechthoeken met meer designvrijheid dan standaard border-radius. Populair voor kaartcomponenten en hero-secties.

Design-richtlijnen voor border-radius

Consistentie is sleutel — gebruik dezelfde border-radius voor vergelijkbare elementen. Google's Material Design gebruikt border-radius als prominent designmiddel. Knoppen: 4–8px voor serrious apps, 20–50px voor speelse interfaces. Kaarten: 8–16px voor de meeste use cases.