Viktigste punkter
- 01Tre modus — ensartet, per hjørne og elliptisk — dekker alt fra enkle avrundede knapper til organiske blob-former.
- 02Støtter px, %, og rem-enheter, hver med ulik skaleringsatferd.
- 03Elliptisk modus viser horisontale og vertikale radier per hjørne for CSS sin fulle border-radius-syntaks.
- 04Live forhåndsvisning bruker den virkelige CSS-egenskapen, så det du ser er nøyaktig det nettleseren din vil gjengitt.
Fra enkle rundede hjørner til organiske blob-former
En fire-hjørne border-radius-verdi er lett nok å skrive fra minne — border-radius: 8px. Men når du trenger ulike radier per hjørne, eller du vil ha CSS elliptisk syntaks for organiske former, blir stenografi kryptisk raskt. Den fulle formen 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 — åtte verdier i en bestemt rekkefølge.
Handytool's border-radius-generator lar deg dra glider for hvert hjørne i hvilken som helst modus og se formen oppdateres live. Bytt mellom px, %, og rem uten å beregne på nytt, og kopier riktig stenografi eller lang-form CSS-deklarasjon når du er ferdig.
Hvordan designe en grensesirkel
- 01
Velg en modus
Ensartet modus bruker en radius på alle fire hjørner. Per-hjørne-modus styrer hvert hjørne uavhengig. Elliptisk modus legger til en separat horisontal og vertikal radius per hjørne.
- 02
Velg en enhet
Velg px for absolutte størrelser, % for verdier som skaleres med elementets dimensjoner, eller rem for størrelser knyttet til rot-skriftstørrelsen.
- 03
Dra gliderne
Juster radiusverdiene og se forhåndsvisningselementet oppdateres live. For per-hjørne-modus, dra hver hjørnegliderr uavhengig.
- 04
Forhåndsvis formen
Forhåndsvisningsboksen bruker den virkelige CSS border-radius-egenskapen, så formen du ser er formen nettleseren din vil gjengi.
- 05
Kopier CSS-en
Klikk Kopier for å få border-radius-deklarasjonen og lim den inn i stilarket ditt.
Vanlige former og når du bruker hver modus
- 01Pille-knapp: ensartet % modus, satt til 50% — alltid en full pille uavhengig av knappbredde
- 02Kort med subtil avrunding: ensartet px modus, 8–16px — det vanligste UI-mønsteret
- 03Asymmetrisk etikett eller label: per-hjørne modus, skarpt på en side, avrundet på den andre
- 04Avatar-sirkel: ensartet % modus, 50% — skalerer med bildebeholderen
- 05Organisk blob-form: elliptisk modus med ulike X/Y-verdier per hjørne
Øyeblikkelig forhåndsvisning, ingenting lastet opp
Border-radius-generatoren er helt på klientsiden. Glidere, modusbytte og enhetendringer oppdaterer forhåndsvisningen umiddelbart uten serveravstikkelse. Det er ingen konto og ingen hastighetsbegrensning.
Verktøyet fungerer på tvers av alle moderne nettlesere. Border-radius-egenskapen — inkludert elliptisk X/Y-syntaks — støttes i hver grønn versjon av Safari, Firefox, Edge og Chrome, så utdataene er trygge å bruke uten leverandørprefiks eller fallbacker.
Border-Radius Generator FAQ
Hva er forskjellen mellom px og % for border-radius?
Pikselradier er absolutte — 16px er alltid 16px. Prosentradier er relative til elementets dimensjoner, så 50% skaper en perfekt sirkel på en kvadratisk boks og en ellipse på et rektangel.
Når skal jeg bruke elliptisk modus?
Bruk elliptisk modus når du vil ha et hjørne som buler mer på en akse — for en horisontal pille, en bladform eller en organisk blob. CSS uttrykker dette som X-radii / Y-radii i border-radius-stenografi.
Hvorfor ser min prosentradius feil ut på en ikke-kvadratisk boks?
Horisontale prosenter er relative til elementets bredde; vertikale prosenter til høyden. På et bredt, kort element strekker hjørnene seg inn i ellipser i stedet for sirkulære buer.
Fungerer utdataene i hver nettleser?
Ja — border-radius inkludert elliptisk syntaks støttes i hver moderne nettleser: alle grønne versjoner av Safari, Firefox, Edge og Chrome. Ingen leverandørprefiks nødvendig.
Hvordan lager jeg en perfekt sirkel med border-radius?
Sett alle hjørner til 50% i prosentmodus på et kvadratisk element. Elementet trenger også lik bredde og høyde — bruk aspect-ratio: 1 / 1 hvis størrelsen er dynamisk.