Border-radius-generator

Så använder du border-radius-generatorn

1. Dra punkterna på kanterna av förhandsvisningen. Varje färgad punkt ställer in den horisontella radien för ett hörn; när Elliptiska hörn (8 värden) är ikryssat styr de vita punkterna de vertikala radierna.
2. Eller skriv exakta värden under Hörn: Övre vänstra, Övre högra, Nedre högra och Nedre vänstra, var och en med ett fält för Horisontell och Vertikal.
3. Välj Enhet: % (procent av rutan) eller px (pixlar). När du byter räknas de aktuella värdena om, så formen ser likadan ut.
4. Ställ in Rutans bredd (px) och Rutans höjd (px) så att de motsvarar ditt element, och använd Alla hörn för att runda alla hörn på en gång.
5. Prova Förinställningar (Rundad, Piller, Cirkel, Blad, Droppe, Ägg, Biljett och tre blobbar) eller klicka på Slumpmässig blob för en organisk form.
6. Kryssa i Separata egenskaper om du föredrar de fyra deklarationerna border-*-radius, och kopiera sedan CSS-kod med Kopiera.

Tangentbord: ge en punkt fokus och tryck på piltangenterna för att ändra radien ett steg i taget (10 steg med Shift).

Syntaxen för border-radius

border-radius tar ett till fyra värden, i ordningen övre vänstra, övre högra, nedre högra, nedre vänstra. Precis som för marginaler kopieras saknade värden från motsatt hörn: border-radius: 10px 20px rundar övre vänstra och nedre högra med 10px och de andra två med 20px. Verktyget skriver alltid den kortaste likvärdiga formen.

Varje hörn är egentligen en fjärdedel av en ellips med två radier. Ett snedstreck skiljer de horisontella radierna från de vertikala, vilket ger upp till åtta värden:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Före snedstrecket: de horisontella radierna för de fyra hörnen. Efter det: de vertikala radierna. När båda listorna är lika utelämnas delen efter snedstrecket.

Pixlar eller procent?

• px ger samma kurva oavsett elementets storlek. Det är rätt val för knappar, kort och inmatningsfält: border-radius: 8px.
• % är relativt till elementet: horisontella radier till bredden, vertikala radier till höjden. 50% gör en kvadrat till en cirkel och en rektangel till en ellips. Det är procentvärdena som gör att blobbar skalas med elementet.

För en pillerformad knapp använder du en pixelradie som är minst halva höjden. Förinställningen Piller gör precis det för den rutstorlek du angett; ett stort värde som 999px fungerar också.

När två intilliggande radier tillsammans blir större än sidan de delar, skalar webbläsaren ned alla radier proportionellt tills de får plats. Därför går formen inte sönder när du drar två handtag förbi varandra.

Blobbar

Blob-förinställningarna och Slumpmässig blob använder åtta procentvärden där de två handtagen på varje sida tillsammans blir 100 %. Kurvorna möts då exakt och formen liknar en slät kiselsten. Animera mellan två blobbar med en CSS-transition på border-radius för en ”morphing”-effekt.