Gå til hovedindhold
LibraTool logoLibraTool

Gratis CSS Border Radius-generator

Design afrundede hjørner visuelt med uafhængig kontrol over hvert hjørne. Understøtter den elliptiske X/Y-syntaks til organiske blob-former.

Virker offline, når den er indlæst
border-radius: 20px 20px 20px 20px;
Enhed

Almindelige anvendelser

  • Organiske blob-formerBrug den elliptiske X/Y-syntaks til at skabe unikke blob-former til herosektioner og illustrationer.
  • Kort- og containerhjørnerStandard afrundede hjørner til kort, containere og paneler i moderne UI-design.
  • Avatar- og profilbildeformerSkab den rigtige hjørnestil til profilbilleder: cirkulær, squircle eller afrundet kvadrat.
  • Piller, tags og badgesByg perfekt afrundede pilleknapper, tags og badges med 9999-forudindstillingen.
  • Asymmetriske hjørnedesignerBland radier på tværs af hjørner for at skabe karakteristiske, mærkegenkendelige kort- og knappformer.

Sådan fungerer det

Border-radius-generatoren kører udelukkende i browseren — ingen server, intet bibliotek og ingen upload. Den bygger CSS-værdien for border-radius direkte i JavaScript med React-state og useMemo og anvender den som inline-stil på et live div-element, så browserens egen CSS-motor tegner formen i realtid.

  1. 1
    Skydere skriver til state
    Hvert skyderfelt skriver til en af otte numeriske state-variabler — fire vandrette hjørneradier og fire lodrette til elliptisk tilstand. Samlet tilstand samler alle otte i én skyder via en setAll-hjælper, der synkroniserer alle værdier på én gang.
  2. 2
    useMemo samler CSS-værdien
    En useMemo-hook genberegner border-radius-strengen, når en hjørneværdi, enheden (px eller %) eller elliptisk-knappen ændres. I standardtilstand laver den kortformen med fire værdier; med elliptisk slået til tilføjer den skråstregen for den fulde syntaks med otte værdier — f.eks. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Browserens CSS-motor tegner forhåndsvisningen
    Den beregnede streng sættes som inline borderRadius-stil på et almindeligt div-element. Browserens layoutmotor står for al tegning — der er intet canvas, intet SVG og ingen tredjeparts tegnekode.
  4. 4
    Clipboard API kopierer outputtet
    Klik på Kopiér kalder navigator.clipboard.writeText med enten CSS-deklarationen (border-radius: ...;) eller den tilsvarende Tailwind-klasse med vilkårlig værdi (rounded-[...]), afhængigt af det valgte format.

Relaterede værktøjer

🎨

CSS Box Shadow-generator

Visuel builder til CSS box-shadow med liveforhåndsvisning, flerlags-stabling, farvevælger, inset-skift og ét-klik-kopiering. Inkluderer Material-, neumorfisme- og glow-forudindstillinger.

Prøv det
🟦

CSS Grid-generator

Design visuelt et CSS-grid — spor, enheder og mellemrum — og kopier det genererede CSS og HTML.

Prøv det
↔️

CSS Flexbox-generator

Eksperimentér med flex-retning, ombrydning, justering og justering på live-elementer — og kopier CSS.

Prøv det

Ofte stillede spørgsmål