Hörnavrundning

Tillämpa border-radius: 50% på ett kvadratiskt element för att skapa en perfekt cirkel. Ställ in alla fyra hörnen på 50%.

Ja, border-radius kan ha fyra individuella värden i ordningen: uppe vänster, uppe höger, nere höger, nere vänster. Detta möjliggör unika asymmetriska former.

Sex till tolv pixlar för knappar och åtta till sexton för kort fungerar i de flesta gränssnitt. Viktigare än den exakta siffran är konsekvensen: har knappar och inmatningsfält på samma skärm olika radier ser layouten ostädad ut. Ligger en bild inuti ett kort ger du det inre elementet en aning mindre radie än det yttre, annars skär sig de två kurvorna synbart.

50 % betyder "halva varje sida", så om elementet inte är kvadratiskt skiljer sig den vågräta och lodräta radien åt och du får en ellips. För en riktig cirkel ger du width och height samma värde eller lägger till aspect-ratio: 1. Vill du ha pillerform på till exempel en knapp vars bredd följer texten använder du ett stort fast värde som 9999px i stället för 50 % — ändarna förblir då perfekta halvcirklar oavsett höjd.