Border Radius Generator

Geef hoeken vorm met meer controle

De hoekradius is een van de snelste manieren om het karakter van een interface te veranderen. Kleine waarden voelen precies en gestructureerd, gemiddelde waarden maken kaarten en knoppen vriendelijker, en grote waarden leveren pillen, organische vormen of speelse illustratiepanelen op. Deze border radius generator toont de volledige CSS-syntaxis, zodat je zowel gewone afgeronde rechthoeken als elliptische hoeken kunt ontwerpen zonder de notatie met schuine streep met de hand te schrijven.

Elke hoek heeft een horizontale en een verticale radius. Als de waarden gelijk zijn, is de hoek cirkelvormig en ziet de CSS eruit als de bekende border-radius-declaratie met vier waarden. Als X en Y verschillen, wordt de hoek elliptisch en schrijft CSS eerst de horizontale waarden, dan een schuine streep en daarna de verticale waarden. Het live voorbeeld maakt dat verband duidelijk, omdat de vorm direct verandert zodra je een regelaar verschuift.

Wanneer elliptische radii handig zijn

Elliptische hoeken zijn handig als je iets organischers wilt dan een simpele kaart, maar toch lichte en responsieve CSS nodig hebt. Ze kunnen avatars, uitgelichte blokken, couponvormen, afbeeldingsmaskers en decoratieve panelen minder standaard laten ogen. Asymmetrische hoeken helpen ook een visuele richting te creëren die de aandacht naar een kop of call-to-action trekt. Gebruik de blob-preset als startpunt en verlaag de sterkste waarden als de vorm begint af te leiden van de inhoud.

Radiuswaarden consistent gebruiken

Houd in productiedesignsystemen een kleine set standaardradii aan voor alledaagse componenten en gebruik aangepaste waarden alleen waar de vorm een duidelijk doel heeft. Een knop, invoerveld en kaart ogen meestal coherenter als ze verwante hoekgroottes delen. Decoratieve secties mogen expressiever zijn, maar moeten nog steeds goed reageren op verschillende breedtes. Test de gekopieerde CSS daarna op de echte elementgrootte, want een radius die er op de voorbeeldkaart evenwichtig uitziet, kan bij een compacte badge te sterk of bij een brede hero-sectie te subtiel aanvoelen.