CSS Border-Radius Generator

Pas afgeronde hoeken visueel aan met live voorbeeld en CSS-code om te kopiëren.

Verticale radii:

px
px 
{{ cssOutput }}

Wat is border-radius?

De CSS-eigenschap border-radius rondt de hoeken van een element af. Je kunt een uniforme radius instellen voor alle vier de hoeken of elke hoek individueel vormgeven. De verkorte notatie volgt de volgorde: linksboven, rechtsboven, rechtsonder, linksonder.

Elliptische border-radii

Met de uitgebreide syntax border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 kun je voor elke hoek een horizontale en verticale radius definiëren. Dit creëert elliptische curves die meer organische vormen opleveren.

Veelvoorkomende toepassingen

  • Cirkels: border-radius: 50% op een vierkant element.
  • Pilvorm: border-radius: 9999px voor afgeronde knoppen.
  • Kaarten: border-radius: 8px tot 16px voor moderne kaartontwerpen.
  • Blobvormen: Verschillende horizontale en verticale radii voor organische vormen.