Hoekafronding

Pas border-radius: 50% toe op een vierkant element om een perfecte cirkel te maken. Stel alle vier de hoeken in op 50%.

Ja, border-radius kan vier afzonderlijke waarden hebben in deze volgorde: linksboven, rechtsboven, rechtsonder, linksonder. Zo maak je unieke asymmetrische vormen.

Zes tot twaalf pixels voor knoppen en acht tot zestien voor kaarten werkt in de meeste interfaces. Belangrijker dan het precieze getal is consistentie: hebben knoppen en invoervelden op hetzelfde scherm verschillende radiussen, dan oogt de lay-out rommelig. Zit er een afbeelding in een kaart, geef het binnenste element dan een iets kleinere radius dan het buitenste, anders vloeken de twee bogen zichtbaar.

50% betekent "de helft van elke zijde", dus zodra het element niet vierkant is verschillen de horizontale en verticale radius en krijg je een ellips. Voor een echte cirkel geef je width en height dezelfde waarde of voeg je aspect-ratio: 1 toe. Wil je een pilvorm op bijvoorbeeld een knop waarvan de breedte het label volgt, gebruik dan een grote vaste waarde als 9999px in plaats van 50%: de uiteinden blijven dan bij elke hoogte perfecte halve cirkels.