LibraTool logoLibraTool

Besplatan Generator CSS border-radius zaobljenja

Vizuelno dizajnirajte zaobljene uglove s nezavisnom kontrolom svakog ugla. Podržava eliptičnu X/Y sintaksu za organske oblike.

Radi offline nakon učitavanja
border-radius: 20px 20px 20px 20px;
Jedinica

Kako radi

Generator border-radius radi u potpunosti u pregledniku — nema servera, nema biblioteke, nema slanja. Izgrađuje niz CSS vrijednosti border-radius direktno u JavaScriptu koristeći React stanje i useMemo, zatim ga primjenjuje kao inline stil na živi div element tako da vlastiti CSS mehanizam preglednika iscrtava oblik u realnom vremenu.

  1. 1
    Klizači zapisuju stanje
    Svaki raspon unosa zapisuje u jednu od osam brojčanih varijabli stanja — četiri horizontalna polumjera ugla i četiri vertikalna za eliptički mod. Unificirani mod svodi svih osam na jedan klizač putem pomoćne funkcije setAll koja sinhronizuje svaku vrijednost odjednom.
  2. 2
    useMemo sastavlja CSS vrijednost
    useMemo kuka ponovo izračunava niz border-radius kad god se promijeni bilo koja vrijednost ugla, jedinica (px ili %), ili eliptički prekidač. U standardnom modu proizvodi skraćenicu sa četiri vrijednosti; sa uključenim eliptičkim modom, dodaje separator kose crte za punu sintaksu sa osam vrijednosti — npr. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS mehanizam preglednika iscrtava pregled
    Izračunati niz se postavlja kao inline stil borderRadius na običan div element. Mehanizam za raspored preglednika obavlja cijelo iscrtavanje — nema canvas-a, nema SVG-a, i nema koda za crtanje treće strane.
  4. 4
    Clipboard API kopira izlaz
    Klik na Kopiraj poziva navigator.clipboard.writeText sa ili CSS deklaracijom (border-radius: ...;) ili ekvivalentnom Tailwind klasom proizvoljne vrijednosti (rounded-[...]), zavisno od odabranog prekidača formata.

Povezani alati

🎨

Generator CSS box-shadow sjene

Vizuelni alat za CSS box-shadow uz prikaz uživo, slaganje više slojeva, birač boja, prekidač za inset i kopiranje jednim klikom. Uključuje predloške Material, neumorphism i sjaj.

Probaj
🟦

CSS Grid generator

Vizuelno kreirajte CSS grid — trake, jedinice i razmake — i kopirajte generirani CSS i HTML.

Probaj
↔️

CSS Flexbox generator

Eksperimentišite sa smjerom fleksa, prelamanjem, poravnanjem elemenata uživo — i kopirajte CSS.

Probaj

Često postavljana pitanja