6XC

CSS Border-Radius Generator

Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS.

966 weergaven

Eenheid

De border-radius-eigenschap

De verkorte volgorde is border-radius: linksboven rechtsboven rechtsonder linksonder. Pixels geven een vaste afronding; percentages schalen mee met de box — 50% op een vierkant maakt een perfecte cirkel. Ongelijke waarden creëren organische "blob"-vormen die populair zijn in moderne hero-secties.

Veelgestelde vragen

Hoe maak ik een cirkel of pil?

Een vierkant element met border-radius: 50% wordt een cirkel. Een rechthoek met een grote vaste straal (bijv. 999px) wordt een pil.

px of % — wat moet ik gebruiken?

Gebruik px wanneer hoeken er bij elke grootte identiek uit moeten zien (kaarten, knoppen). Gebruik % wanneer de afronding moet meeschalen met het element, zoals bij cirkels en blobs.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren CSS Rand Generator Ontwerp een rand visueel — breedte, stijl (solid, dashed, dotted, double…), kleur en radius — met live preview. Genereren