CodeKitHubHvad er dette værktøj?
border-radius er CSS-egenskaben, der runder hjørnerne af et element. Skrevet i hånden kræver den fire værdier i en fast rækkefølge — øverst-venstre, øverst-højre, nederst-højre, nederst-venstre — hvilket er let at bytte om på, især når de fire hjørner er forskellige.
Dette værktøj fjerner gætværket: flyt en skyder, se hjørnet blive rundet i den live forhåndsvisning, og aflæs den præcise CSS i den genererede kodeboks. Én låseknap skifter mellem en ensartet radius (alle fire hjørner ens, det mest almindelige tilfælde) og fire uafhængige skydere til organiske, asymmetriske former.
Hvorfor bruge det?
- Live forhåndsvisning opdateres øjeblikkeligt, mens du trækker — ingen redigering af CSS og genindlæsning for at se resultatet.
- Ét klik låser den almindelige situation "samme radius på hvert hjørne"; lås op til pilleformede knapper, talebobler og klatformer.
- Genererer den forkortede enkeltværdiform, når alle hjørner matcher, eller den fulde fireværdiform, når de ikke gør — klar til kopiering og indsætning uanset hvad.
- Kører udelukkende i din browser. Intet du indtaster sendes nogen steder hen.
- Gratis, ingen tilmelding, fungerer på mobil.
Sådan bruger du det
- Lad "lås alle hjørner" forblive markeret, og træk i en hvilken som helst skyder for at indstille én ensartet radius for hele boksen.
- Fjern markeringen ved låsen for at styre hvert hjørne uafhængigt — nyttigt til pilleformer, dråbeformer og asymmetriske kort.
- Se forhåndsvisningsboksen opdatere live, mens du justerer hver skyder.
- Kopiér den genererede CSS fra kodeboksen og indsæt den i dit stylesheet.
Eksempel
Input
Øverst-venstre: 40px, øverst-højre: 8px, nederst-højre: 40px, nederst-venstre: 8pxOutput
border-radius: 40px 8px 40px 8px;Uens modstående hjørner som dette skaber en blad- eller kronbladsform — en almindelig effekt i kort- og badgedesign.
px eller % — hvilken enhed skal jeg bruge?
Denne generator genererer pixelværdier, hvilket er det rigtige standardvalg til de fleste UI-opgaver: knapper, kort og inputfelter, hvor du ønsker en fast, forudsigelig hjørneradius uanset elementets størrelse.
Procentdele opfører sig anderledes — de er relative til elementets egen bredde og højde, så en radius på 50% på et kvadratisk element giver en perfekt cirkel, og på et ikke-kvadratisk element giver en ellipse. Hvis du ønsker den effekt (avatarer, klatformer der skalerer med beholderen), tag den genererede CSS og byt px-værdierne ud med en %-værdi manuelt — for eksempel gør border-radius: 50% enhver kvadratisk boks til en cirkel.
Almindelige border-radius-mønstre
- Afrundet kort: alle hjørner ens, cirka 8-16px for UI-komponenter.
- Pilleformet knap: sæt radiusen til halvdelen af elementets højde (eller brug blot 9999px, som altid klipper til en fuld pille uanset højden).
- Cirkulær avatar: border-radius: 50% på et kvadratisk (lige bredde og højde) element.
- Taleboble: tre hjørner afrundet, ét hjørne skarpt — sæt tre skydere højt og én til 0.
- Blad-/kronbladsform: modstående hjørner matchet, tilstødende hjørner forskellige — f.eks. øverst-venstre og nederst-højre begge store, øverst-højre og nederst-venstre begge små.
Kombinér med en skygge
Afrundede hjørner optræder sjældent alene — kort og knapper har som regel også brug for lidt skygge for at give dybde. Brug Box Shadow-generatoren til at finstille en slagskygge og anvend begge dele af den genererede CSS på det samme element.
Ofte stillede spørgsmål
Hvad er forskellen mellem border-radius og hjørnerækkefølgen?
CSS-forkortelsen følger altid øverst-venstre, øverst-højre, nederst-højre, nederst-venstre i den rækkefølge, med uret startende fra øverst-venstre. Dette værktøjs fire skydere er mærket til at matche, så du aldrig selv skal huske rækkefølgen.
Kan jeg bruge forskellige enheder for hvert hjørne?
Ja, i rigtig CSS kan du blande px, %, em og rem på tværs af hjørner, selvom det er sjældent i praksis. Dette værktøj genererer ensartede px-værdier for enkelthedens skyld — byt en enkelt værdi til % eller en anden enhed direkte i dit stylesheet, hvis du har brug for blandede enheder.
Hvorfor giver border-radius: 50% nogle gange en oval i stedet for en cirkel?
Fordi procentdele er relative til hver akse uafhængigt — den vandrette radius er en procentdel af elementets bredde, den lodrette radius en procentdel af dets højde. På et kvadratisk element (lige bredde og højde) giver det en perfekt cirkel; på et rektangel giver det en ellipse.
Virker border-radius også på baggrundsbilleder og kanter?
Ja — border-radius klipper elementets baggrund, kant og (i moderne browsere) dets box-shadow til den afrundede form. Den klipper ikke børneindhold, der løber over, medmindre du også sætter overflow: hidden på forælderen.
Er der en grænse for, hvor stor radiusen kan være?
Ingen hård grænse — hvis radiusen overstiger halvdelen af elementets bredde eller højde, begrænser browsere den, så de to kurver på den side mødes præcis i midten, hvilket er sådan et kvadrat bliver til en perfekt cirkel eller en pilleform.
Hvordan laver jeg en pilleform eller en perfekt cirkel?
Til en pilleform (kapselform) sæt radiusen til mindst halvdelen af elementets højde — det almindelige trick er border-radius: 9999px, som virker ved enhver højde, fordi browseren automatisk begrænser kurven. En perfekt cirkel kræver to ting: lige bredde og højde, plus border-radius: 50%.