Border Radius Generator

Over deze tool

De eigenschap border-radius rondt de hoeken van een element af. Wanneer alle vier waarden gelijk zijn, wordt een afkorting met één waarde gebruikt. Verschillende waarden maken asymmetrische vormen — de pil gebruikt 50% op alle hoeken, het blad wisselt 0% en 50% af.

Klik op een hoeknummer om direct een waarde te typen, of sleep de gekoppelde schuifregelaar om alle vier hoeken tegelijk te wijzigen. Schakel Alle hoeken vergrendelen uit om elke hoek onafhankelijk te bedienen.

Hoe te gebruiken

1. Voer waarden in de vier hoekvelden in (linksboven, rechtsboven, linksonder, rechtsonder).
2. Schakel Alle hoeken vergrendelen in om alle vier waarden tegelijk met de schuifregelaar in te stellen.
3. Schakel tussen px- en %-eenheden afhankelijk van je ontwerpeisen.
4. Klik op een preset (Pil, Blad, Blob, enz.) om onmiddellijk een vooraf gedefinieerde vorm toe te passen.

Gebruiksscenario's

UI-ontwerpers gebruiken border-radius om knoppen, kaarten en avataarvormingen te maken. Ontwikkelaars verfijnen afgeronde hoeken voor merkontwerpsystemen. De pilvorm (50%) wordt vaak gebruikt voor tags en badges. Asymmetrische waarden maken organische blad- of blobvormen voor decoratieve elementen.

Veelgestelde vragen

• Wat is het verschil tussen px en %? — px geeft een vaste hoekstraal ongeacht de elementgrootte. % is relatief aan de breedte en hoogte van het element — 50% op alle hoeken maakt een perfecte cirkel (als het element vierkant is).
• Kan ik voor elke hoek verschillende stralen instellen? — Ja. Verwijder het vinkje bij Alle hoeken vergrendelen en typ verschillende waarden in elk hoekveld.
• Wat betekent de afgekorte uitvoer? — Wanneer alle vier hoeken gelijk zijn, is de uitvoer één waarde. Wanneer ze verschillen, is de CSS-volgorde: linksboven, rechtsboven, rechtsonder, linksonder.