Vigtigste punkter
- 01Tre modes — uniform, pr. hjørne og elliptisk — dækker alt fra simple afrundede knapper til organiske blob-former.
- 02Understøtter px, %, og rem enheder, hver med forskellig skaleringsadfærd.
- 03Elliptisk mode viser horisontale og lodrette radier pr. hjørne til CSS's fulde border-radius-syntaks.
- 04Live preview bruger den rigtige CSS-egenskab, så det du ser er præcis hvad din browser gengiver.
Fra simple afrundede hjørner til organiske blob-former
En fire-hjørne border-radius-værdi er let nok at skrive fra hukommelsen — border-radius: 8px. Men når du har brug for forskellige radier pr. hjørne, eller du ønsker CSS-elliptisk syntaks for organiske former, bliver stenografen hurtigt kryptisk. Den fulde form er top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — otte værdier i en bestemt rækkefølge.
Handytools border-radius-generator lader dig trække glidebanen for hvert hjørne i enhver mode og se formen opdatere live. Skift mellem px, %, og rem uden at genberegne, og kopier den korrekte stenografi eller langtformet CSS-erklæring når du er færdig.
Sådan designer du en Border Radius
- 01
Vælg en mode
Uniform mode anvender en radius på alle fire hjørner. Pr. hjørne-mode kontrollerer hvert hjørne uafhængigt. Elliptisk mode tilføjer en separat vandret og lodret radius pr. hjørne.
- 02
Vælg en enhed
Vælg px for absolutte størrelser, % for værdier der skaleres med elementets dimensioner, eller rem for størrelser bundet til rodskriftstørrelsen.
- 03
Træk gliderne
Juster radius-værdierne og se preview-elementet opdatere live. For pr. hjørne-mode, træk hver hjørnes glidebaneliver uafhængigt.
- 04
Se preview af formen
Preview-boksen anvender den rigtige CSS border-radius-egenskab, så formen du ser er formen din browser gengiver.
- 05
Kopier CSS
Klik Kopier for at få border-radius-erklæringen og indsæt den i dit stylesheet.
Almindelige former og hvornår du bruger hver mode
- 01Pille-knap: uniform % mode, indstillet til 50% — altid en fuld pille uanset knappens bredde
- 02Kort med subtil afrunding: uniform px mode, 8–16px — det mest almindelige UI-mønster
- 03Asymmetrisk tag eller etiket: pr. hjørne-mode, skarp på den ene side, afrundet på den anden
- 04Avatar cirkel: uniform % mode, 50% — skaleres med billedbeholderen
- 05Organisk blob form: elliptisk mode med forskellige X/Y-værdier pr. hjørne
Øjeblikkelig preview, intet uploadet
Border-radius-generatoren er helt klient-side. Glidebaner, mode-skift og enhedsændringer opdaterer alle preview'et øjeblikkeligt uden server roundtrip. Der er ingen konto og ingen hastighedsbegrænsning.
Værktøjet fungerer på tværs af alle moderne browsers. Border-radius-egenskaben — herunder elliptisk X/Y-syntaks — understøttes i alle fersksindsversioner af Safari, Firefox, Edge og Chrome, så outputtet er sikkert at bruge uden vendor-præfikser eller fallbacks.
Border-Radius Generator FAQ
Hvad er forskellen mellem px og % til border-radius?
Pixelradier er absolutte — 16px er altid 16px. Procentradier er relative til elementets dimensioner, så 50% skaber en perfekt cirkel på en kvadratkasse og en ellipse på et rektangel.
Hvornår bør jeg bruge elliptisk mode?
Brug elliptisk mode når du ønsker et hjørne der buler mere på en akse — til en vandret pille, en bladform, eller en organisk blob. CSS udtrykker dette som X-radier / Y-radier i border-radius-stenografen.
Hvorfor ser min procentradius forkert ud på en ikke-kvadratisk boks?
Horisontale procenter er relative til elementets bredde; lodrette procenter til dens højde. På et bredt, kort element strækkes hjørnerne til ellipser i stedet for cirkulære buer.
Fungerer outputtet i alle browsers?
Ja — border-radius inklusiv elliptisk syntaks understøttes i alle moderne browsers: alle fersksindsversioner af Safari, Firefox, Edge og Chrome. Ingen vendor-præfikser nødvendige.
Hvordan opretter jeg en perfekt cirkel med border-radius?
Indstil alle hjørner til 50% i procentmode på et kvadratelement. Elementet skal også have samme bredde og højde — brug aspect-ratio: 1 / 1 hvis størrelsen er dynamisk.