CodeKitHubHva er dette verktøyet?
border-radius er CSS-egenskapen som runder av hjørnene på et element. Skrevet for hånd tar den fire verdier i en fast rekkefølge — øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre — noe som lett blir feil, spesielt når de fire hjørnene skal være forskjellige.
Dette verktøyet fjerner gjettingen: flytt en glidebryter, se hjørnet rundes av i den levende forhåndsvisningen, og les av nøyaktig CSS i den genererte kodeboksen. En enkel lås-bryter veksler mellom en ensartet radius (alle fire hjørner like, det vanligste tilfellet) og fire uavhengige glidebrytere for organiske, asymmetriske former.
Hvorfor bruke det?
- Levende forhåndsvisning oppdateres momentant mens du drar — ingen redigering av CSS og oppdatering for å se resultatet.
- Ett-klikks lås for det vanlige tilfellet «samme radius på alle hjørner»; lås opp for pilleknapper, snakkebobler og blob-former.
- Gir ut kortformen med én verdi når alle hjørnene stemmer overens, eller den fulle firverdiformen når de ikke gjør det — klar til å lime inn uansett.
- Kjører helt i nettleseren din. Ingenting du skriver inn blir sendt noe sted.
- Gratis, ingen registrering, fungerer på mobil.
Slik bruker du det
- La «lås alle hjørner» stå avkrysset og dra en hvilken som helst glidebryter for å sette én ensartet radius for hele boksen.
- Fjern haken i låsen for å styre hvert hjørne uavhengig — nyttig for pilleformer, tåredråper og asymmetriske kort.
- Se forhåndsvisningsboksen oppdateres live mens du justerer hver glidebryter.
- Kopier den genererte CSS-en fra kodeboksen og lim den inn i stilarket ditt.
Eksempel
Inndata
Øverst venstre: 40px, Øverst høyre: 8px, Nederst høyre: 40px, Nederst venstre: 8pxResultat
border-radius: 40px 8px 40px 8px;Ujevne motstående hjørner som dette skaper en blad- eller kronbladsilhuett — en vanlig effekt i kort- og merkedesign.
px eller % — hvilken enhet bør jeg bruke?
Denne generatoren gir pikselverdier, som er riktig standard for det meste av UI-arbeid: knapper, kort og inndatafelt der du vil ha en fast, forutsigbar hjørneradius uansett elementets størrelse.
Prosent oppfører seg annerledes — de er relative til elementets egen bredde og høyde, så en radius på 50 % på et kvadratisk element gir en perfekt sirkel, og på et ikke-kvadratisk element gir en ellipse. Vil du ha den effekten (avatarer, blob-former som skalerer med beholderen), kan du ta den genererte CSS-en og bytte px-verdiene til en %-verdi for hånd — for eksempel gjør border-radius: 50% en kvadratisk boks om til en sirkel.
Vanlige border-radius-mønstre
- Avrundet kort: alle hjørner like, omtrent 8–16px for UI-komponenter.
- Pilleknapp: sett radiusen til halvparten av elementets høyde (eller bruk bare 9999px, som begrenses til en full pilleform uansett høyde).
- Sirkulær avatar: border-radius: 50% på et kvadratisk (lik bredde og høyde) element.
- Snakkeboble: tre hjørner avrundet, ett hjørne skarpt — sett tre glidebrytere høyt og én til 0.
- Blad-/kronbladform: motstående hjørner like, tilstøtende hjørner ulike — for eksempel øverst venstre og nederst høyre begge store, øverst høyre og nederst venstre begge små.
Kombinere med en skygge
Avrundede hjørner opptrer sjelden alene — kort og knapper trenger som regel litt skygge for dybde også. Bruk Box Shadow-generatoren til å finjustere en slagskygge og bruk begge de genererte CSS-delene på samme element.
Ofte stilte spørsmål
Hva er forskjellen mellom border-radius og hjørnerekkefølgen?
CSS-kortformen følger alltid øverst venstre, øverst høyre, nederst høyre, nederst venstre i den rekkefølgen, med klokka fra øverst til venstre. De fire glidebryterne i dette verktøyet er merket i samme rekkefølge, så du slipper å huske den selv.
Kan jeg bruke ulike enheter for hvert hjørne?
Ja, i ekte CSS kan du blande px, %, em og rem mellom hjørnene, selv om det er sjeldent i praksis. Dette verktøyet genererer ensartede px-verdier for enkelhets skyld — bytt en enkelt verdi til % eller en annen enhet direkte i stilarket ditt hvis du trenger blandede enheter.
Hvorfor blir border-radius: 50% noen ganger oval i stedet for rund?
Fordi prosent er relativt til hver akse uavhengig av hverandre — den horisontale radiusen er en prosentandel av elementets bredde, den vertikale radiusen en prosentandel av høyden. På et kvadratisk element (lik bredde og høyde) gir dette en perfekt sirkel, på et rektangel gir det en ellipse.
Virker border-radius på bakgrunnsbilder og kantlinjer også?
Ja — border-radius klipper elementets bakgrunn, kantlinje og (i moderne nettlesere) box-shadow til den avrundede formen. Den klipper ikke barneinnhold som flyter over med mindre du også setter overflow: hidden på foreldreelementet.
Er det en grense for hvor stor radiusen kan være?
Ingen hard grense — hvis radiusen overstiger halvparten av elementets bredde eller høyde, begrenser nettleseren den slik at de to kurvene på den siden møtes nøyaktig på midten, som er hvordan et kvadrat blir en perfekt sirkel eller en pilleform.
Hvordan lager jeg en pilleform eller en perfekt sirkel?
For en pilleform (kapsel) setter du radiusen til minst halvparten av elementets høyde — det vanlige trikset er border-radius: 9999px, som fungerer ved enhver høyde fordi nettleseren begrenser kurven automatisk. En perfekt sirkel krever to ting: lik bredde og høyde, pluss border-radius: 50%.