CSS border-radius generator — Gratis Online Værktøj

Hvad er CSS border-radius generator?

Gratis online CSS border-radius generator. Justér hjørneradiusser med visuelle kontroller.

CSS-egenskaben border-radius styrer rundheden af elementhjørner, og dens alsidighed rækker langt ud over simple afrundede rektangler. Ved at justere hvert hjørne uafhængigt kan du skabe piller, cirkler, asymmetriske former og komplekse organiske former — alt sammen med en enkelt CSS-egenskab. CSS Border Radius Generator giver individuel skyderstyring for alle fire hjørner med en live-forhåndsvisning, der opdateres øjeblikkeligt.

Hvert hjørne — øverst til venstre, øverst til højre, nederst til højre, nederst til venstre — har sin egen skyder, så du kan skabe helt asymmetriske former. Enheden kan skiftes mellem pixels (px) og procent (%), hvilket ændrer opførselen markant. Pixelværdier skaber hjørner med fast radius, der forbliver samme størrelse uanset elementets dimensioner. Procentværdier binder radius til elementets størrelse, hvilket er sådan du skaber perfekte cirkler (border-radius: 50% på et kvadrat).

Fire forudindstillinger dækker de mest almindelige anvendelsesmuligheder. Circle skaber border-radius: 50% for en perfekt cirkel (eller ellipse på ikke-kvadratiske elementer). Pill skaber en form med fuldt afrundede ender (border-radius: 9999px), nyttig til knapmarkører og tags. Card anvender en diskret 8px afrunding, der er egnet til kortkomponenter og containere. Rounded anvender en 8px afrunding på alle hjørner, passende til knapper og formularfelter.

Den genererede CSS-kode viser forkortet syntaks. Hvis alle fire hjørner har samme værdi, udlæses en enkelt værdi (fx border-radius: 8px). Hvis hjørnerne adskiller sig, udlæses fire-værdi-syntaksen i urets retning (øverst til venstre, øverst til højre, nederst til højre, nederst til venstre). Koden er klar til at kopiere direkte ind i dit stylesheet.

Praktiske anvendelser af CSS border-radius generator

Oprettelse af en rundet knap med pilleform

Dit designsystem bruger pilleformede knapper med 24px højde og fuldt afrundede ender. Vælg forudindstillingen "Pill" for border-radius: 9999px. Forhåndsvisningen viser pilleformen. Kopiér CSS'en, og anvend den på din knapkomponent. Justér hjørneværdierne enkeltvis, hvis du ønsker et blødere udseende.

Design af en asymmetrisk form til en hero-sektion

En landingsside-hero har brug for en karakteristisk form: øverst til venstre 0px, øverst til højre 40px, nederst til højre 0px, nederst til venstre 40px. Indstil hver hjørneskyder uafhængigt. Forhåndsvisningen viser en unik asymmetrisk form. Den genererede CSS er border-radius: 0 40px 0 40px.

Oprettelse af en cirkulær avatar med procentradius

En brugeravatar er et 64x64 pixel kvadratisk billede. Skift enheden til %, og sæt alle fire hjørner til 50%. Forhåndsvisningen viser en perfekt cirkel. Den genererede CSS er border-radius: 50%, hvilket fungerer på ethvert kvadratisk element uanset størrelse.

Hvorfor bruge CSS border-radius generator?

4 forudindstillinger: Cirkel, Pille, Kort, Afrundet
Ren, klar-til-brug CSS
Forhåndsvisning i realtid

Sådan bruger du CSS border-radius generator — Trin for trin

Justér skydeknapperne for hvert hjørne.

Vælg en forudindstilling: Cirkel, Pille, Kort eller Afrundet.

Kopier den genererede CSS-kode.

Hvem er CSS border-radius generator bedst til?

UI-design
kort
knapper

Pro-tips til CSS border-radius generator

1Brug pixelværdier til elementer med fast størrelse (knapper, kort), hvor hjørneradius skal forblive konstant. Brug procentværdier til responsive elementer, hvor radius skal skaleres med elementet.
2Forudindstillingen "Pill" bruger en meget stor pixelværdi (9999px) frem for 50%, fordi 50% på et rektangel skaber en ellipse og ikke en pille. Den store pixelværdi sikrer fuldt afrundede ender på ethvert rektangulært element.
3For en "squircle" (kvadrat med let afrundede hjørner, populær i iOS) skal du bruge omkring 10-12% border-radius på alle hjørner. Dette giver et blødere udseende end små pixelværdier.
4Når du bruger procentværdier, beregnes radius i forhold til elementets bredde (for venstre/højre) og højde (for top/bund). Forskellige procenter på vandrette versus lodrette hjørner skaber elliptiske hjørner.

CSS border-radius generator — Ofte stillede spørgsmål

What is border-radius in CSS?

border-radius rounds the corners of an element. It accepts 1-4 values for each corner. For example, border-radius: 10px 20px 30px 40px sets top-left, top-right, bottom-right, and bottom-left respectively.

How to make a circle with CSS?

Set border-radius: 50% on a square element (equal width and height). This creates a perfect circle.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is CSS border-radius generator really free to use?

Yes, CSS border-radius generator is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Klar til at bruge CSS border-radius generator?

Gratis onlineværktøj — fungerer i din browser, ingen tilmelding nødvendig. Start med at bruge det nu.

Prøv det nu