CodeKitHubVad är detta verktyg?
border-radius är CSS-egenskapen som rundar hörnen på ett element. Skriven för hand tar den fyra värden i en fast ordning — övre vänster, övre höger, nedre höger, nedre vänster — vilket är lätt att blanda ihop, särskilt när de fyra hörnen skiljer sig åt.
Det här verktyget tar bort gissningsleken: flytta ett reglage, se hörnet rundas i den levande förhandsvisningen, och läs av exakt CSS från den genererade kodrutan. En enda låsomkopplare växlar mellan en enhetlig radie (alla fyra hörn lika, det vanligaste fallet) och fyra oberoende reglage för organiska, asymmetriska former.
Varför använda det?
- Levande förhandsvisning uppdateras direkt när du drar — ingen CSS-redigering och uppdatering för att se resultatet.
- Enkelt-klick-lås för det vanliga fallet "samma radie på varje hörn"; lås upp för pillerknappar, pratbubblor och klickformer.
- Genererar den korta enkelvärdesformen när alla hörn matchar, eller den fullständiga fyrvärdesformen när de inte gör det — redo att kopieras och klistras in oavsett.
- Körs helt i din webbläsare. Ingenting du anger skickas någonstans.
- Gratis, ingen registrering, fungerar på mobilen.
Så använder du det
- Lämna "lås alla hörn" ikryssad och dra valfritt reglage för att sätta en enhetlig radie för hela rutan.
- Avmarkera låset för att styra varje hörn oberoende — användbart för pillerformer, tårdroppar och asymmetriska kort.
- Se förhandsvisningsrutan uppdateras live medan du justerar varje reglage.
- Kopiera den genererade CSS:en från kodrutan och klistra in den i ditt stilmallsdokument.
Exempel
Inmatning
Övre vänster: 40px, Övre höger: 8px, Nedre höger: 40px, Nedre vänster: 8pxResultat
border-radius: 40px 8px 40px 8px;Omatchade motsatta hörn som dessa skapar en blad- eller kronbladssilhuett — en vanlig effekt inom kort- och märkesdesign.
px eller % — vilken enhet ska jag använda?
Den här generatorn ger pixelvärden, vilket är rätt standard för det mesta UI-arbete: knappar, kort och inmatningsfält där du vill ha en fast, förutsägbar hörnradie oavsett elementets storlek.
Procenttal beter sig annorlunda — de är relativa till elementets egen bredd och höjd, så en 50 %-radie på ett kvadratiskt element ger en perfekt cirkel, och på ett icke-kvadratiskt element ger en ellips. Vill du ha den effekten (avatarer, klickformer som skalar med behållaren) ta den genererade CSS:en och byt px-värdena mot ett %-värde för hand — till exempel gör border-radius: 50% om en fyrkantig ruta till en cirkel.
Vanliga border-radius-mönster
- Rundat kort: alla hörn lika, ungefär 8–16px för UI-komponenter.
- Pillerknapp: sätt radien till hälften av elementets höjd (eller använd bara 9999px, som begränsas till en fullständig piller oavsett höjd).
- Cirkulär avatar: border-radius: 50% på ett kvadratiskt (lika bredd och höjd) element.
- Pratbubbla: tre hörn rundade, ett hörn vasst — ställ tre reglage högt och ett till 0.
- Blad-/kronbladsform: motsatta hörn matchade, angränsande hörn olika — t.ex. övre vänster och nedre höger båda stora, övre höger och nedre vänster båda små.
Kombinera med en skugga
Rundade hörn förekommer sällan ensamma — kort och knappar behöver oftast lite skugga för djup också. Använd Box Shadow-generatorn för att finjustera en fallande skugga och tillämpa båda genererade CSS-deklarationerna på samma element.
Vanliga frågor
Vad är skillnaden mellan border-radius och hörnordningen?
CSS-genvägen följer alltid övre vänster, övre höger, nedre höger, nedre vänster i den ordningen, medurs med start uppe till vänster. Det här verktygets fyra reglage är märkta för att matcha, så du behöver aldrig komma ihåg ordningen själv.
Kan jag använda olika enheter för varje hörn?
Ja, i riktig CSS kan du blanda px, %, em och rem mellan hörn, även om det är ovanligt i praktiken. Det här verktyget genererar enhetliga px-värden för enkelhets skull — byt ett enskilt värde till % eller en annan enhet direkt i ditt stilmallsdokument om du behöver blandade enheter.
Varför blir border-radius: 50% ibland en oval istället för en cirkel?
Eftersom procenttal är relativa till varje axel oberoende av varandra — den horisontella radien är en procentandel av elementets bredd, den vertikala radien en procentandel av dess höjd. På ett kvadratiskt element (lika bredd och höjd) ger det en perfekt cirkel; på en rektangel ger det en ellips.
Fungerar border-radius på bakgrundsbilder och kantlinjer också?
Ja — border-radius klipper elementets bakgrund, kantlinje och (i moderna webbläsare) dess box-shadow till den rundade formen. Den klipper inte barninnehåll som svämmar över om du inte också sätter overflow: hidden på föräldern.
Finns det en gräns för hur stor radien kan vara?
Ingen hård gräns — om radien överskrider hälften av elementets bredd eller höjd begränsar webbläsare den så att de två kurvorna på den sidan möts exakt i mitten, vilket är hur en kvadrat blir en perfekt cirkel eller en pillerform.
Hur gör jag en pillerform eller en perfekt cirkel?
För en pillerform (kapsel), sätt radien till minst hälften av elementets höjd — det vanliga tricket är border-radius: 9999px, som fungerar vid vilken höjd som helst eftersom webbläsaren begränsar kurvan automatiskt. En perfekt cirkel behöver två saker: lika bredd och höjd, plus border-radius: 50%.