Hörnradiegenerator
Skapa CSS-egenskaper för border-radius
Indata och alternativ
Snabbval och exempel
Körs i din webbläsare. Dina indata stannar på den här enheten.
Resultat
Ange dina värden för att se resultatet.
Om Hörnradiegeneratorn
Vår kostnadsfria CSS-generator för border-radius ger dig full visuell kontroll över rundade hörn på alla HTML-element. Justera varje hörn för sig eller länka ihop alla, välj mellan flera enheter (px, %, em, rem) och se resultatet direkt i förhandsvisningen.
Rundade hörn är en grundläggande del av modern webbdesign. Från diskreta 4px-rundningar på kort och inmatningsfält till helt runda 50%-cirklar för avatarer: egenskapen border-radius formar hur användare uppfattar ditt gränssnitt. Med det här verktyget hittar du enkelt exakt de värden du behöver, utan att gissa och ladda om webbläsaren hela tiden.
Generatorn innehåller 10 förinställda former som Kvadrat, Cirkel, Piller, Droppe och Organisk, samt en slumpgenerator för kreativa experiment. Resultatet levereras i flera format, bland annat CSS-förkortning, egenskaper för enskilda hörn, en färdig CSS-klass och en ungefärlig motsvarighet i Tailwind CSS.
Viktiga funktioner
- Oberoende kontroll över varje hörn: uppe till vänster, uppe till höger, nere till höger och nere till vänster
- Reglage för att länka hörnen så att alla fyra får samma radie
- Fyra enhetsalternativ: pixlar (px), procent (%), em och rem för responsiva designer
- Förhandsvisning i realtid med justerbar elementstorlek (100-300px) och egen färgväljare
- 10 förinställda former: Kvadrat, Rundad, Cirkel, Piller, Rundad upptill, Rundad nedtill, Rundad till vänster, Rundad till höger, Droppe och Organisk
- Visuella värdeindikatorer som visar exakt radie vid varje hörn
- Slumpgenerator för radier, för inspiration och experiment
- Flera CSS-format som utdata: förkortning, enskilda egenskaper, CSS-klass och ungefärlig Tailwind CSS-motsvarighet
- Kopiera till urklipp med ett klick för direkt användning i dina projekt
- Reglage med intervallvisning för intuitiv justering av värden
Så använder du Hörnradiegeneratorn
- Välj enhet: Välj px för fasta storlekar, % för responsiv skalning eller em/rem för storlekar baserade på typsnittet.
- Justera hörnvärdena: Använd reglagen för att ställa in radien för varje hörn för sig, eller aktivera "Länka alla hörn" för jämn rundning.
- Testa de förinställda formerna: Klicka på någon av de 10 förinställda formerna, som Cirkel, Piller eller Droppe, för att direkt använda vanliga inställningar.
- Förhandsgranska resultatet: Se förhandsvisningen med justerbar storlek och färg för att se exakt hur din border-radius kommer att se ut.
- Kopiera CSS: Klicka på Kopiera för att hämta CSS-koden för border-radius, eller använd avsnittet med alternativa format för enskilda egenskaper eller Tailwind-klasser.
Användningsområden
- Stilsättning av knappar: Skapa pillerformade knappar, diskret rundade call-to-action-knappar eller helt runda ikonknappar.
- Kortkomponenter: Använd enhetligt rundade hörn på kort, modaler och dialogrutor i ditt designsystem.
- Avatarbilder: Använd 50% border-radius på kvadratiska bilder för att skapa perfekt runda användaravatarer och profilbilder.
- Inmatningsfält: Lägg till en mild rundning på formulärfält, textareor och rullgardinslistor för ett modernt utseende.
- Navigeringselement: Stilsätt flikar, märken, taggar och menyalternativ med lämplig hörnrundning.
- Kreativa former: Kombinera asymmetriska hörnvärden för att skapa organiska blobbar, droppformer och unika dekorativa element.
- Design av tooltips och popovers: Använd exakt hörnrundning på tooltips, popovers och rullgardinsmenyer.
- Responsiva designtoken: Skapa enhetliga border-radius-värden i hela projektet genom att använda enheterna em eller rem.
Vanliga frågor
Är verktyget gratis?
Ja, Hörnradiegeneratorn är helt gratis och utan begränsningar. Du kan använda den hur många gånger du vill, utan registrering eller betalning.
Är mina data säkra?
Absolut. Verktyget körs helt i din webbläsare. Ingen data skickas till någon server, så dina inställningar och den genererade CSS-koden stannar privat på din enhet.
Vad är skillnaden mellan px och % för border-radius?
Pixelvärden (px) ger en fast radie oavsett elementets storlek. Procentvärden (%) är relativa till elementets mått, vilket gör dem responsiva. Till exempel ger 50% på ett kvadratiskt element en perfekt cirkel.
Hur gör jag en perfekt cirkel med CSS?
Sätt border-radius till 50% på ett element med lika bredd och höjd. Förinställningen Cirkel i det här verktyget använder exakt den inställningen.
Stöds border-radius i alla webbläsare?
Ja, CSS-egenskapen border-radius stöds fullt ut i alla moderna webbläsare, bland annat Chrome, Firefox, Safari, Edge och Opera. Inga leverantörsprefix behövs.
Tips och bästa praxis
- Använd enhetliga värden: Fastställ 2-3 standardvärden för border-radius i ditt designsystem (t.ex. 4px, 8px, 16px) för visuell enhetlighet.
- Använd procent för cirklar: Sätt 50% på kvadratiska element för perfekta cirklar som skalas automatiskt när storleken ändras.
- Håll det diskret för formulär: Små värden (2-8px) fungerar bäst för inmatningsfält och formulärelement för ett rent och professionellt intryck.
- Testa asymmetriska hörn: Olika värden på varje hörn skapar unika former som kan ge dekorativa element karaktär.
- Överväg responsiva enheter: Använd em eller rem för border-radius-värden som skalas proportionellt mot din typografi.
- Testa med innehåll: Kontrollera alltid hur rundade hörn ser ut med verkligt innehåll i elementet, särskilt vid olika fönsterstorlekar.