Border-radius generator

Zo gebruik je de border-radius generator

1. Sleep de stippen op de randen van het voorbeeld. Elke gekleurde stip bepaalt de horizontale straal van een hoek; met Elliptische hoeken (8 waarden) aangevinkt bepalen de witte stippen de verticale stralen.
2. Of typ exacte waarden bij Hoeken: Linksboven, Rechtsboven, Rechtsonder en Linksonder, elk met een veld Horizontaal en Verticaal.
3. Kies de Eenheid: % (procent van het kader) of px (pixels). Bij het wisselen worden de huidige waarden omgerekend, zodat de vorm gelijk blijft.
4. Stel Breedte kader (px) en Hoogte kader (px) in op de maten van je element, en gebruik Alle hoeken om alle hoeken tegelijk af te ronden.
5. Probeer de Voorinstellingen (Afgerond, Pil, Cirkel, Blad, Druppel, Ei, Ticket en drie blobs) of klik op Willekeurige blob voor een organische vorm.
6. Vink Losse eigenschappen (longhand) aan als je liever de vier declaraties border-*-radius hebt, en kopieer dan de CSS-code met Kopiëren.

Toetsenbord: geef een stip de focus en druk op de pijltjestoetsen om de straal met één stap te veranderen (10 met Shift).

De syntaxis van border-radius

border-radius neemt één tot vier waarden, in de volgorde linksboven, rechtsboven, rechtsonder, linksonder. Net als bij marges worden ontbrekende waarden overgenomen van de tegenoverliggende hoek: border-radius: 10px 20px rondt linksboven en rechtsonder af met 10px en de andere twee met 20px. De tool schrijft altijd de kortste gelijkwaardige vorm.

Elke hoek is eigenlijk een kwart van een ellips met twee stralen. Een schuine streep scheidt de horizontale stralen van de verticale, wat tot acht waarden oplevert:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Vóór de streep: de horizontale stralen van de vier hoeken. Erna: de verticale stralen. Zijn beide lijsten gelijk, dan valt het deel na de streep weg.

Pixels of procenten?

• px geeft dezelfde ronding, hoe groot het element ook is. Dat is de juiste keuze voor knoppen, kaarten en invoervelden: border-radius: 8px.
• % is relatief ten opzichte van het element: horizontale stralen ten opzichte van de breedte, verticale ten opzichte van de hoogte. 50% maakt van een vierkant een cirkel en van een rechthoek een ellips. Dankzij procenten schalen blobvormen mee met het element.

Voor een pilvormige knop gebruik je een straal in pixels van minstens de halve hoogte. De voorinstelling Pil doet precies dat voor het kaderformaat dat je hebt ingevoerd; een enorme waarde zoals 999px werkt ook.

Tellen aangrenzende stralen samen op tot meer dan de zijde die ze delen, dan verkleinen browsers alle stralen naar verhouding tot ze passen. Daarom gaat de vorm niet stuk als je twee punten langs elkaar sleept.

Blobvormen

De blob-voorinstellingen en Willekeurige blob gebruiken acht procentwaarden waarbij de twee punten op elke zijde samen 100% zijn. De rondingen sluiten dan precies op elkaar aan en de vorm lijkt op een gladde kiezelsteen. Animeer tussen twee blobs met een CSS-transition op border-radius voor een “morphing”-effect.