CSS border-radius-generator — gratis online verktøy

Hva er CSS border-radius-generator?

Gratis online CSS border-radius-generator. Juster radius for alle fire hjørner med visuelle kontroller.

CSS-egenskapen border-radius styrer rundingen på elementhjørner, og allsidigheten går langt utover enkle avrundede rektangler. Ved å justere hvert hjørne uavhengig kan du lage piller, sirkler, asymmetriske former og komplekse, organiske utseender – alt med en enkelt CSS-egenskap. CSS Border Radius Generator gir individuell glidebryterkontroll for alle fire hjørner med en direkte forhåndsvisning som oppdateres umiddelbart.

Hvert hjørne – øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre – har sin egen glidebryter, slik at du kan lage helt asymmetriske former. Enhetsvekslingen mellom piksler (px) og prosent (%) endrer oppførselen betydelig. Pikselverdier gir hjørner med fast radius som forblir like store uavhengig av elementets dimensjoner. Prosentverdier knytter radiusen til elementstørrelsen, og det er slik du lager perfekte sirkler (border-radius: 50% på en firkant).

Fire forhåndsinnstillinger dekker de vanligste bruksområdene. Circle lager border-radius: 50% for en perfekt sirkel (eller ellipse på ikke-kvadratiske elementer). Pill lager en form med helt avrundede ender (border-radius: 9999px), nyttig for knappemerker og tags. Card bruker en subtil 8px-runding som passer for kortkomponenter og containere. Rounded bruker en 8px-runding på alle hjørner, egnet for knapper og skjemainnfelt.

Den genererte CSS-koden viser kortformssyntaksen. Hvis alle fire hjørner har samme verdi, genereres en enkelt verdi (f.eks. border-radius: 8px). Hvis hjørnene er forskjellige, genereres fireverdisyntaksen i klokkeretning (øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre). Koden er klar til å kopieres inn i stilarket ditt.

Praktiske bruksområder for CSS border-radius-generator

Lage en avrundet knapp med pilleform

Designtsystemet ditt bruker pilleformede knapper med 24px høyde og helt avrundede ender. Velg forhåndsinnstillingen «Pill» for border-radius: 9999px. Knappens forhåndsvisning viser pilleformen. Kopier CSS-en og bruk den på knappkomponenten din. Juster hjørneverdiene enkeltvis hvis du ønsker et mykere utseende.

Utforme en asymmetrisk form for en hero-seksjon

En landingsside-hero trenger en særegen form: øverst til venstre på 0px, øverst til høyre på 40px, nederst til høyre på 0px, nederst til venstre på 40px. Still hver hjørneglidebryter uavhengig. Forhåndsvisningen viser en unik asymmetrisk form. Den genererte CSS-en er border-radius: 0 40px 0 40px.

Lage en sirkulær avatar med prosentbasert radius

En brukeravatar er et 64x64 pikslers kvadratisk bilde. Bytt enhet til % og sett alle fire hjørner til 50%. Forhåndsvisningen viser en perfekt sirkel. Den genererte CSS-en er border-radius: 50%, som fungerer på ethvert kvadratisk element uavhengig av størrelse.

Hvorfor bruke CSS border-radius-generator?

4 forhåndsinnstillinger: Sirkel, Pille, Kort, Avrundet
Ren, klar-til-bruk CSS
Sanntids forhåndsvisning

Slik bruker du CSS border-radius-generator — Steg for steg

Juster glidebryterne for hvert hjørne.

Velg en forhåndsinnstilling: Sirkel, Pille, Kort eller Avrundet.

Kopier den genererte CSS-koden.

Hvem er CSS border-radius-generator best for?

UI-design
kort
knapper

Profftips for CSS border-radius-generator

1Bruk pikselverdier for elementer med fast størrelse (knapper, kort) der hjørneradiusen skal forbli konstant. Bruk prosentverdier for responsive elementer der radiusen skal skaleres med elementet.
2Forhåndsinnstillingen «Pill» bruker en svært høy pikselverdi (9999px) i stedet for 50%, fordi 50% på et rektangel lager en ellipse, ikke en pille. Den høye pikselverdien sikrer helt avrundede ender på ethvert rektangulært element.
3For en «squircle» (kvadrat med lett avrundede hjørner som er populært i iOS) bruker du omtrent 10–12% border-radius på alle hjørner. Dette gir et mykere utseende enn små pikselverdier.
4Når du bruker prosentverdier, beregnes radiusen i forhold til elementets bredde (for venstre/høyre) og høyde (for topp/bunn). Forskjellige prosentandeler på horisontale og vertikale hjørner gir elliptiske hjørner.

CSS border-radius-generator — Ofte stilte spørsmå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 å bruke CSS border-radius-generator?

Gratis onlineverktøy — fungerer i nettleseren din, ingen registrering nødvendig. Begynn å bruke det nå.

Prøv det nå