Wat is CSS Border Radius Builder?
border-radius bepaalt hoe afgerond elke hoek van een element is, maar de vierwaardige shorthand en de achtwaardige elliptische syntaxis kunnen verwarrend zijn. Deze tool maakt de eigenschappen visueel door u elke hoek onafhankelijk te laten instellen en te kiezen tussen px-, rem- en percentage-eenheden, zodat u het effect kunt zien voordat u de CSS-declaratie schrijft.
Snel antwoord
Stel afgeronde hoeken in op elk element door elke hoek onafhankelijk aan te passen of een uniforme waarde te gebruiken. Kies px-, rem- of percentage-eenheden en zie een live preview van het resultaat.
Last updated: 2026-06-11
Beperkingen
- De tool toont uniforme en individuele hoekradiuswaarden. Het ondersteunt niet de elliptische syntaxis die een slash gebruikt om aparte horizontale en verticale radii per hoek in te stellen.
- Percentage border-radius-waarden zijn relatief aan de elementafmetingen en kunnen onverwachte elliptische hoeken produceren op elementen met dynamische afmetingen.
- Afgeronde hoeken knippen standaard geen child-inhoud weg. Als een child-element een achtergrond of rand heeft die voorbij de afgeronde hoeken uitsteekt, voeg dan overflow: hidden toe aan de parent om het knippen bij de afgeronde grens af te dwingen.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Stel een radiuswaarde in voor elke hoek afzonderlijk of schakel uniforme modus in om één waarde overal toe te passen.
- Kies de eenheid die u wilt gebruiken: px, rem of percentage.
- Bekijk hoe de live preview wordt bijgewerkt terwijl u elke hoek aanpast.
- Kopieer de gegenereerde CSS-declaratie naar uw stylesheet.
Waarvoor je het kunt gebruiken
- Maak pilvormige knoppen door de border-radius groter in te stellen dan de knophoogte.
- Maak cirkelvormige avatars en profielfoto's met border-radius: 50%.
- Ontwerp kaarthoeken met subtiele afronding op de bovenste hoeken en scherpe onderste hoeken.