Viktiga punkter
- 01Tre lägen — enhetligt, per-hörn och elliptiskt — täcker allt från enkla avrundade knappar till organiska blob-former.
- 02Stöder px, % och rem enheter, var och en med olika skalningsbeteende.
- 03Elliptiskt läge exponerar horisontella och vertikala radier per hörn för CSS:s fullständiga border-radius syntax.
- 04Live preview använder den verkliga CSS-egenskapen, så det du ser är exakt vad din webbläsare kommer att rendera.
Från enkla avrundade hörn till organiska blob-former
Ett fyrhörnt border-radius värde är lätt nog att skriva från minnet — border-radius: 8px. Men när du behöver olika radier per hörn, eller du vill ha CSS:s elliptiska syntax för organiska former, blir shorthand-syntaxen snabbt kryptisk. Den fullständiga formen är top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — åtta värden i en specifik ordning.
Handytools border-radius-generator låter dig dra skjutreglage för varje hörn i vilket läge som helst och se formen uppdateras live. Växla mellan px, % och rem utan omberäkning och kopiera rätt shorthand eller långform CSS-deklaration när du är klar.
Hur man designar en Border Radius
- 01
Välj ett läge
Enhetligt läge applicerar en radie på alla fyra hörn. Per-hörn läge styr varje hörn oberoende. Elliptiskt läge lägger till en separat horisontell och vertikal radie per hörn.
- 02
Välj en enhet
Välj px för absoluta storlekar, % för värden som skalas med elementets dimensioner, eller rem för storlekar knutna till root-fontstorleken.
- 03
Dra skjutreglagen
Justera radiusvärdena och se preview-elementet uppdateras live. För per-hörn läge, dra varje hörns skjutreglage oberoende.
- 04
Förhandsgranska formen
Preview-boxen applicerar den faktiska CSS border-radius egenskapen, så formen du ser är den form din webbläsare kommer att rendera.
- 05
Kopiera CSS:en
Klicka Kopiera för att ta border-radius deklarationen och klistra in den i din stylesheet.
Vanliga former och när varje läge ska användas
- 01Piller-knapp: enhetlig % läge, satt till 50% — alltid en full piller oavsett knappbredd
- 02Kort med subtil avrundning: enhetlig px läge, 8–16px — det vanligaste UI-mönstret
- 03Asymmetrisk tagg eller etikett: per-hörn läge, vass på en sida, avrundad på den andra
- 04Avatar cirkel: enhetlig % läge, 50% — skalas med bildcontainern
- 05Organisk blob form: elliptiskt läge med olika X/Y värden per hörn
Omedelbar preview, ingenting uppladdat
Border-radius-generatorn är helt klientsidg. Skjutreglage, lägesväxlingar och enhetändringar uppdaterar alla preview omedelbar utan serveromväxling. Det finns inget konto och ingen gränsvärde för hastighet.
Verktyget fungerar i alla moderna webbläsare. Border-radius-egenskapen — inklusive elliptisk X/Y-syntax — är stödd i alla evergreen-versioner av Safari, Firefox, Edge och Chrome, så utmatningen är säker att använda utan vendor-prefix eller fallbacks.
Border-Radius Generator FAQ
Vad är skillnaden mellan px och % för border-radius?
Pixel-radier är absoluta — 16px är alltid 16px. Procent-radier är relativa till elementets dimensioner, så 50% skapar en perfekt cirkel på en kvadratbox och en ellips på en rektangel.
När ska jag använda elliptiskt läge?
Använd elliptiskt läge när du vill ha ett hörn som buktar mer på en axel — för en horisontell piller, en blad form, eller en organisk blob. CSS uttrycker detta som X-radier / Y-radier i border-radius shorthand.
Varför ser min procentradie fel ut på en icke-kvadratisk box?
Horisontella procentsatser är relativa till elementets bredd; vertikala procentsatser till dess höjd. På ett brett, kort element sträcker sig hörnen till ellipser istället för cirkulära bågar.
Fungerar utmatningen i alla webbläsare?
Ja — border-radius inklusive elliptisk syntax är stödd i alla moderna webbläsare: alla evergreen-versioner av Safari, Firefox, Edge och Chrome. Ingen vendor-prefix behövs.
Hur skapar jag en perfekt cirkel med border-radius?
Sätt alla hörn till 50% i procent läge på ett kvadratiskt element. Elementet behöver också lika bredd och höjd — använd aspect-ratio: 1 / 1 om storleken är dynamisk.