Slaan oor na hoofinhoud
LibraTool logoLibraTool

Gratis CSS Grensradiusgenerator

Ontwerp geronde hoeke visueel met onafhanklike beheer oor elke hoek. Ondersteun die elliptiese X/Y-sintaksis vir organiese blobvorms.

Werk vanlyn sodra gelaai
border-radius: 20px 20px 20px 20px;
Eenheid

Algemene gebruike

  • Organiese Blob-vormsGebruik die elliptiese X/Y-sintaks om unieke blob-vorms vir helioseksies en illustrasies te skep.
  • Kaart- en Houer-hoekeStandaard geronde hoeke vir kaarte, houers en panele in moderne UI-ontwerp.
  • Avatar en Profielfoto-vormsSkep die regte hoekstyl vir profielfoto's: sirkelvormig, squircle, of geronde vierkant.
  • Pille, Etikette en BadgesBou volkome geronde pil-knoppies, etikette en badges met die 9999-voorstelling.
  • Asimmetriese HoekontwerpeMeng radii oor hoeke om kenmerkende, merkherkenbare kaarten en knoppesvorme te skep.

Hoe dit werk

Die rand-radius-generator loop heeltemal in die blaaier — daar is geen bediener, geen biblioteek, en geen oplaai nie. Dit bou die CSS border-radius-waardestring direk in JavaScript met React-toestand en useMemo, pas dit dan toe as 'n inlynstyl op 'n lewendige div-element sodat die blaaier se eie CSS-enjin die vorm intyds render.

  1. 1
    Skuiwers skryf toestand
    Elke reikstoevoer skryf na een van agt numeriese toestandveranderlikes — vier horisontale hoekradiuse en vier vertikale vir elliptiese modus. Eenvormige modus vou al agt in 'n enkele skuiwer saam via 'n setAll-helper wat elke waarde gelyktydig sinkroniseer.
  2. 2
    useMemo stel die CSS-waarde saam
    'n useMemo-hoek herbereken die border-radius-string wanneer enige hoekwaarde, eenheid (px of %), of elliptiese wisselaar verander. In standaardmodus produseer dit die vier-waarde-kortpad; met ellipties aan voeg dit die skuinsstreep-skeier by vir die volle agt-waarde-sintaksis — bv. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Blaaier se CSS-enjin render die voorskou
    Die berekende string word as 'n inlyn borderRadius-styl op 'n gewone div-element gestel. Die blaaier se uitlegenjin doen al die rendering — daar is geen canvas, geen SVG, en geen derdeparty-tekenkode nie.
  4. 4
    Knipbord-API kopieer die uitset
    Om Kopieer te klik roep navigator.clipboard.writeText aan met óf die CSS-verklaring (border-radius: ...;) óf die ekwivalente Tailwind-arbitrêre-waarde-klas (rounded-[...]), afhangend van die gekose formaatwisselaar.

Verwante gereedskap

🎨

CSS-blokkieskadu-opwekker

Visuele bouer vir CSS boksskadu met lewendige voorskou, multi-laag stapeling, kleurkieser, insetwisseling en een-klik kopie. Sluit materiaal, neumorfisme en gloeivoorinstellings in.

Probeer dit
🟦

CSS Grid-kragopwekker

Ontwerp 'n CSS-rooster visueel — spore, eenhede en gate — en kopieer die gegenereerde CSS en HTML.

Probeer dit
↔️

CSS Flexbox-kragopwekker

Eksperimenteer met flex-rigting, -verpakking, -regverdigheid en -afstemming op live-items — en kopieer die CSS.

Probeer dit

Gereelde vrae