Förståelsen av CSS-egenskapen border-radius
Egenskapen border-radius i CSS används för att runda hörnen på ett element. Genom att definiera en eller flera radier kan du styra hur skarpt eller mjukt övergången mellan elementets sidor ska vara. Verktyget Border Radius-generator låter dig justera dessa värden visuellt och genererar omedelbart den tillhörande CSS-koden för din design.
När du använder verktyget är det initiala värdet på reglaget inställt på 24, vilket resulterar i följande CSS-kod:
border-radius: 24px;
De fyra reglagen för hörnen mappar medurs till följande positioner:
- Uppe till vänster
- Uppe till höger
- Nere till höger
- Nere till vänster
Genom att förstå hur dessa hörn styrs individuellt eller tillsammans kan du skapa allt från enkla knappar till komplexa, asymmetriska former.
Skillnaden mellan pixlar och procent
Valet av enhet har en avgörande betydelse för hur de rundade hörnen beter sig när elementets storlek förändras. I verktyget kan du använda en väljare för att växla mellan enheterna "px" och "%".
- Pixlar (px): I pixelenheter rundas ett hörn med ett fast värde. Detta innebär att hörnens rundning förblir exakt likadan oavsett om elementet förstoras eller förminskas.
- Procent (%): I procentenheter rundas hörnet relativt till boxens dimensioner. En horisontell procentandel följer elementets bredd, medan en vertikal procentandel följer elementets höjd. Detta gör procentenheter mycket användbara för responsiv design där elementets proportioner kan variera.
Skapa grundläggande former och pillerknappar
När det elliptiska läget är avstängt är varje hörn en kvartscirkel med en enda radie. Du kan styra formen på två huvudsakliga sätt beroende på om du länkar samman hörnen eller justerar dem separat.
Om du vill skapa en pillerformad knapp behåller du enheten "px" och drar ett hörn förbi halva knappens höjd. Detta gör att sidorna förblir helt rundade och behåller sin pillerform oavsett vilken bredd knappen har.
För att underlätta designprocessen erbjuder verktyget färdiga knappar för snabba förinställningar:
- Skarp: Återställer hörnen till raka vinklar.
- Rundad: Ger en standardiserad mjuk rundning.
- Cirkel: Sätter alla hörn till 50%.
Avancerade former med elliptiska hörn
Genom att aktivera det elliptiska läget kan du skapa mjukare och mer organiska former. I detta läge får varje enskilt hörn en separat horisontell och vertikal radie, vilket styrs via egna reglage för "Horisontell" och "Vertikal".
När det elliptiska läget är aktivt skriver generatorn koden med den speciella två-värdesformen i CSS, där ett snedstreck (/) separerar de horisontella radierna från de vertikala radierna. Om du stänger av det elliptiska läget och hörnen återgår till att vara runda, faller koden automatiskt tillbaka till den kortare standardformen. Detta gör det möjligt att skapa asymmetriska figurer som liknar löv eller flytande vätskedroppar.
Användning av förinställningar i designen
Förinställningarna i verktyget fungerar som utgångspunkter för att snabbt generera specifika geometriska figurer. Genom att klicka på någon av knapparna under rubriken för förinställningar ändras reglagen direkt till fördefinierade värden:
| Förinställning | Beskrivning av formen |
|---|---|
| Skarp | Tar bort all rundning (0px). |
| Rundad | Ger en balanserad, klassisk hörnrundning. |
| Cirkel | Sätter samtliga hörn till 50%. |
| Blobb | Skapar en asymmetrisk, organisk form med elliptiska hörn. |
| Blad | Skapar en form där motstående hörn är skarpa och de andra är rundade. |
När du har justerat formen till önskat utseende kan du klicka på knappen "Kopiera CSS" för att kopiera den genererade koden direkt till ditt urklipp och klistra in den i din stilmall.
Integritet och lokal bearbetning
När du använder denna Border Radius-generator sker all beräkning och rendering lokalt. Varje hörn ritas direkt i din webbläsare. Inget av det du ställer in här laddas upp till BroBroGo.
Vanliga frågor
Hur fungerar de fyra hörnen och px mot %?
De fyra reglagen motsvarar, medurs, hörnen uppe till vänster, uppe till höger, nere till höger och nere till vänster. I pixlar rundas ett hörn med ett fast värde; i procent rundas det relativt till boxen – en horisontell procent följer bredden och en vertikal procent följer höjden, så 50% gör en kvadrat till en cirkel.
Vad gör det elliptiska läget?
När det är avstängt är varje hörn en kvartscirkel med en enda radie. Slå på det så får varje hörn en separat horisontell och vertikal radie, vilket är hur du bygger mjuka, organiska "blobb"-former. Generatorn skriver koden med snedstreck åt dig och går tillbaka till den korta formen så fort hörnen är runda igen.
Hur gör jag en perfekt cirkel eller en pillerform?
Länka hörnen, byt till procent och sätt 50%: en kvadrat blir en cirkel. För en pillerformad knapp behåller du pixlar istället och drar ett hörn förbi halva knappens höjd – då förblir sidorna helt rundade oavsett bredd. Förinställningen Cirkel fixar det första fallet med ett klick.