CSS-pil- / stadionvormgenerator
Ontwerp CSS border-radius visueel: vier onafhankelijke hoeksliders in px of procenten, een 'alle hoeken koppelen'-shortcut voor direct cirkels en pillen, plus een organische blob-modus met willekeurige vormen.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de border-radius-generator met alle vier de hoeken gekoppeld en ingesteld op een zeer grote radius: 999px. Bij een typische knopgrote rechthoek wordt zo'n grote radius door de browser afgekapt tot precies de helft van de hoogte van de box, wat de volledig afgeronde pil- of stadionvorm oplevert in plaats van een vierkant met licht afgeronde hoeken.
Daarom hebben pilknoppen geen precieze radiuswaarde nodig die is afgestemd op de hoogte van elke knop — elk getal dat comfortabel groter is dan de helft van de hoogte geeft hetzelfde afgekapte resultaat. Daarom is 999px (of zelfs 9999px) in CSS het informele gemeenschaps-stenogram geworden voor 'rond dit helemaal af'.
Pas het formaat van de box in je eigen layout aan en dezelfde 999px blijft een volledige pil produceren op elke hoogte, omdat de browser altijd automatisch afkapt op de helft van de box. Kopieer de CSS zodra het er goed uitziet, of ontkoppel de hoeken om in plaats daarvan een asymmetrische capsule te maken.