Border Radius-generator
Skapa vanliga och elliptiska CSS border-radius-värden med live-förhandsvisning och kopierbar CSS-kod, direkt i din webbläsare.
🔒 Körs helt i din webbläsare — ingenting laddas uppForma hörn med bättre kontroll
Hörnradie är ett av de snabbaste sätten att ändra ett gränssnitts personlighet. Små värden känns exakta och strukturerade, medelstora värden gör kort och knappar vänligare, och stora värden kan skapa piller, organiska former eller lekfulla illustrationspaneler. Den här border radius-generatorn visar hela CSS-syntaxen så att du kan utforma både vanliga rundade rektanglar och elliptiska hörn utan att skriva snedstrecksnotationen för hand.
Varje hörn har en horisontell och en vertikal radie. När värdena är lika är hörnet cirkulärt och CSS:en ser ut som den välbekanta border-radius-deklarationen med fyra värden. När X och Y skiljer sig blir hörnet elliptiskt, och CSS skriver de horisontella värdena först, sedan ett snedstreck och därefter de vertikala värdena. Live-förhandsvisningen gör sambandet tydligt eftersom formen ändras direkt när du flyttar varje reglage.
När elliptiska radier är användbara
Elliptiska hörn är praktiska när du vill ha något mer organiskt än ett enkelt kort men ändå behöver lätt och responsiv CSS. De kan få avatarer, utvalda ytor, kupongformer, bildmasker och dekorativa paneler att kännas mindre generiska. Asymmetriska hörn hjälper också till att skapa en visuell riktning som drar blicken mot en rubrik eller en uppmaning. Använd blob-förinställningen som utgångspunkt och minska sedan de kraftigaste värdena om formen börjar distrahera från innehållet.
Använd radievärden konsekvent
I designsystem för produktion bör du hålla dig till en liten uppsättning standardradier för vardagliga komponenter och använda egna värden bara där formen har ett tydligt syfte. En knapp, ett inmatningsfält och ett kort ser oftast mer sammanhängande ut när de delar relaterade hörnstorlekar. Dekorativa sektioner kan vara mer uttrycksfulla, men de bör ändå fungera bra i olika bredder. Testa den kopierade CSS:en på elementets verkliga storlek, eftersom en radie som ser balanserad ut på förhandsvisningskortet kan kännas för kraftig på en liten badge eller för svag på en bred hero-panel.
Hur man använder
- Ställ in hörnradierJustera horisontella och vertikala värden för övre vänster, övre höger, nedre höger och nedre vänster hörn.
- Förhandsgranska formenSe hur kortet uppdateras för varje ändring av ett hörn.
- Kopiera CSSAnvänd border-radius-deklarationen i din komponents stilar.