Border Radius Generator
Ontwerp border-radius per hoek.
CSS
Wat doet deze tool?
Ontwerp visueel de border-radius van een element: 4 hoeken apart of asymmetrisch (elliptisch), en kopieer de resulterende CSS.
Hoe werkt de berekening?
Border-radius accepteert 1 tot 4 waarden voor de vier hoeken (linksboven, rechtsboven, rechtsonder, linksonder). Met '/' scheid je horizontale en verticale radii voor elliptische hoeken. De tool bouwt de shorthand op basis van je sliders.
Een concreet voorbeeld
Alle 4 hoeken 20px → 'border-radius: 20px;'. Enkel linksboven 40px, rest 8px → 'border-radius: 40px 8px 8px 8px;'.
Veelgestelde vragen
Wat is het verschil tussen % en px?+
px is absoluut. % is relatief aan de breedte/hoogte — 50% maakt een cirkel of ellips.
Hoe maak ik een 'blob'-vorm?+
Gebruik elliptische radii per hoek: 'border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%;'.
Werkt border-radius op alle elementen?+
Ja, ook op images en video's. Combineer met overflow: hidden voor afgeronde inhoud.