Hjørneafrunding

Anvend border-radius: 50 % på et kvadratisk element for at skabe en perfekt cirkel. Indstil alle fire hjørner til 50 %.

Ja, border-radius kan have fire individuelle værdier i rækkefølgen: øverst venstre, øverst højre, nederst højre, nederst venstre. Det giver mulighed for unikke asymmetriske former.

Seks til tolv pixels til knapper og otte til seksten til kort fungerer i de fleste grænseflader. Vigtigere end det præcise tal er konsekvensen: har knapper og indtastningsfelter på samme skærm forskellige radier, virker layoutet rodet. Ligger der et billede inde i et kort, skal det indre element have en anelse mindre radius end det ydre, ellers støder de to kurver synligt sammen.

50 % betyder "halvdelen af hver side", så hvis elementet ikke er kvadratisk, adskiller den vandrette og lodrette radius sig, og du får en ellipse. Til en rigtig cirkel giver du width og height samme værdi eller tilføjer aspect-ratio: 1. Vil du have pilleform på for eksempel en knap, hvis bredde følger teksten, så brug en stor fast værdi som 9999px i stedet for 50 % — enderne forbliver da perfekte halvcirkler ved enhver højde.