CSS-pil / stadionvormgenerator
Ontwerp de CSS-randradius visueel: vier onafhankelijke hoekschuifregelaars in px of procent, een snelkoppeling naar alle hoeken voor directe cirkels en pillen, plus een organische blob-modus met willekeurige vormen.
Resultaat
Deze pagina opent de grensradiusgenerator met alle vier de hoeken gekoppeld en geduwd tot een zeer grote straal: 999px. Op een typische rechthoek ter grootte van een knop wordt een zo grote straal door de browser afgekapt tot precies de helft van de hoogte van het vak, wat de volledig ronde pil- of stadionvorm oplevert in plaats van een vierkant met licht afgeronde hoeken.
Dit is de reden waarom pill-knoppen geen precieze straalwaarde nodig hebben die is afgestemd op de hoogte van elke knop; elk getal dat groter is dan de helft van de hoogte geeft hetzelfde uitgeknipte resultaat, wat ook de reden is dat 999px (of zelfs 9999px) de informele afkorting van de gemeenschap is geworden voor 'hier helemaal rond' in CSS.
Pas het formaat van het vak aan in je eigen lay-out en dezelfde 999px blijft op elke hoogte een volledige pil produceren, omdat de browser altijd automatisch tot de helft van het vak knipt. Kopieer de CSS zodra deze er goed uitziet, of ontkoppel de hoeken om in plaats daarvan een asymmetrische capsule te bouwen.