Hopp til hovedinnhold
LibraTool logoLibraTool

Gratis CSS border-radius-generator

Design avrundede hjørner visuelt med uavhengig kontroll over hvert hjørne. Støtter elliptisk X/Y-syntaks for organiske blob-former.

Fungerer uten nett når den er lastet
border-radius: 20px 20px 20px 20px;
Enhet

Vanlige bruksområder

  • Organiske blobformerBruk den elliptiske X/Y-syntaksen for å lage unike blobformer til heroseksjoner og illustrasjoner.
  • Kort- og behølderhjørnerStandard avrundede hjørner for kort, beholdere og paneler i moderne UI-design.
  • Avatar- og profilbildeformerLag riktig hjørnestil for profilbilder: sirkulær, squircle eller avrundet kvadrat.
  • Piller, tags og badgesBygg perfekt avrundede pilleknapper, tags og badges med 9999 forhåndsinnstillingen.
  • Asymmetriske hjørnedesignerBland radier på tvers av hjørner for å lage karakteristiske, merkegjenkjennelige kort- og knappformer.

Hvordan det fungerer

Border-radius-generatoren kjører helt i nettleseren — ingen server, ingen bibliotek og ingen opplasting. Den bygger CSS-verdien for border-radius direkte i JavaScript med React-state og useMemo, og bruker den som inline-stil på et live div-element, slik at nettleserens egen CSS-motor tegner formen i sanntid.

  1. 1
    Skyveknapper skriver til state
    Hver skyveknapp skriver til én av åtte numeriske state-variabler — fire horisontale hjørneradier og fire vertikale for elliptisk modus. Samlet modus slår alle åtte sammen til én skyveknapp via en setAll-hjelper som synkroniserer alle verdiene samtidig.
  2. 2
    useMemo setter sammen CSS-verdien
    En useMemo-hook beregner border-radius-strengen på nytt når en hjørneverdi, enhet (px eller %) eller elliptisk-bryteren endres. I standardmodus gir den kortformen med fire verdier; med elliptisk på legger den til skråstreken for full syntaks med åtte verdier — f.eks. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Nettleserens CSS-motor tegner forhåndsvisningen
    Den beregnede strengen settes som inline borderRadius-stil på et vanlig div-element. Nettleserens layoutmotor gjør all tegningen — ingen canvas, ingen SVG og ingen tredjeparts tegnekode.
  4. 4
    Clipboard API kopierer resultatet
    Klikk på Kopier kaller navigator.clipboard.writeText med enten CSS-deklarasjonen (border-radius: ...;) eller den tilsvarende Tailwind-klassen med vilkårlig verdi (rounded-[...]), avhengig av valgt format.

Relaterte verktøy

🎨

CSS box-shadow-generator

Visuelt verktøy for CSS box-shadow med forhåndsvisning i sanntid, stabling av flere lag, fargevelger, inset-bryter og kopiering med ett klikk. Inkluderer forhåndsinnstillinger for Material, neumorfisme og glød.

Prøv det
🟦

CSS Grid-generator

Utform et CSS-rutenett visuelt — spor, enheter og mellomrom — og kopier den genererte CSS og HTML.

Prøv det
↔️

CSS Flexbox-generator

Eksperimenter med flex-retning, ombrytning, justify og align på live-elementer — og kopier CSS.

Prøv det

Ofte stilte spørsmål