Border radius-generator
Ställ in varje hörn och kopiera CSS-koden.
- Körs i din webbläsare — din text skickas aldrig någonstans
- Ingen registrering, inga kvoter, gratis att använda så ofta du vill
Så fungerar det
border-radius är enkelt tills du vill ha tre hörn rundade och ett kantigt, och då måste alla slå upp ordningen på de fyra värdena.
Ordningen, för gott
Uppe till vänster, uppe till höger, nere till höger, nere till vänster — medurs med start uppe till vänster. Samma ordning medurs från övre vänstra hörnet gäller även för förkortningarna margin, padding och border, vilket är värt att lära sig utantill en gång för alla.
Pixlar eller procent
Pixlar ger samma kurva oavsett elementets storlek. Procent är relativa till elementets egen bredd och höjd, så kurvan skalas — och en radie på 50 % på en kvadrat ger en perfekt cirkel, vilket är standardtricket för runda avatarer.
Pillerformen
En radie som är större än halva elementets höjd begränsas till exakt hälften, vilket är varför border-radius: 999px pålitligt ger ett piller oavsett höjd. Det är robustare än att beräkna rätt värde, eftersom det fortsätter att fungera när innehållet ändras.
När hörn ser fel ut på nästlade element
En rundad ruta inuti en annan rundad ruta behöver en mindre radie på den inre, minskad med utfyllnaden mellan dem, annars sitter kurvorna inte koncentriskt. Det är en liten detalj som får kort att se ordentligt gjorda ut.
Border radius-generator — frågor
I vilken ordning står de fyra värdena?
Uppe till vänster, uppe till höger, nere till höger, nere till vänster — medurs från övre vänstra hörnet.
Hur gör jag en perfekt cirkel?
border-radius: 50% på ett element som är exakt kvadratiskt.
Hur gör jag en pillerformad knapp?
Använd ett stort värde som 999px. Webbläsare begränsar det till halva höjden, så det fungerar i vilken storlek som helst.
Ska jag använda pixlar eller procent?
Pixlar för en jämn kurva; procent när du vill att den ska skalas med elementet.
Fungerar det överallt?
Ja. border-radius har stötts utan prefix i betydligt över ett decennium.