Preskoči na glavni sadržaj
LibraTool logoLibraTool

Generator CSS border-radius — besplatno

Vizualno dizajnirajte zaobljene kutove s neovisnom kontrolom svakog kuta. Podržava eliptičnu X/Y sintaksu za organske blob oblike.

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

Uobičajene namjene

  • Organički Blob ObliciKoristite eliptičnu X/Y sintaksu za stvaranje jedinstvenih blob oblika za hero sekcije i ilustracije.
  • Uglovi Kartice i KontejneraStandardni zaobljeni uglovi za kartice, kontejnere i panele u modernom UI dizajnu.
  • Avatar & Oblici Profilnih SlikaKreirajte pravi stil kuta za profilne slike: kružno, squircle ili zaobljeni kvadrat.
  • Pilule, Tagovi i OznakeIzgradite savršeno zaobljena dugmad za pilule, tagove i oznake sa 9999 presetom.
  • Asimetrični Uglovi DizajnaMiješajte radijuse kroz uglove da biste kreirali distinktivne, brendski prepoznatljive oblike kartice i dugmadi.

Kako funkcionira

Generator border-radius radi u potpunosti u pregledniku — nema poslužitelja, biblioteke ni slanja. Izrađuje niz vrijednosti CSS border-radius izravno u JavaScriptu koristeći React state i useMemo, zatim ga primjenjuje kao ugrađeni stil na živi div element tako da vlastiti CSS mehanizam preglednika renderira oblik u stvarnom vremenu.

  1. 1
    Klizači zapisuju stanje
    Svaki raspon unosa zapisuje u jednu od osam brojčanih varijabli stanja — četiri vodoravna polumjera kutova i četiri okomita za eliptični način. Ujedinjeni način sažima svih osam u jedan klizač putem pomoćne funkcije setAll koja sinkronizira sve vrijednosti odjednom.
  2. 2
    useMemo sastavlja CSS vrijednost
    useMemo kuka ponovno izračunava niz border-radius kad god se promijeni vrijednost kuta, jedinica (px ili %) ili prekidač eliptičnosti. U standardnom načinu proizvodi kraticu s četiri vrijednosti; s uključenom eliptičnosti dodaje razdjelnik kose crte za punu sintaksu s osam vrijednosti — npr. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS mehanizam preglednika renderira pregled
    Izračunati niz postavlja se kao ugrađeni borderRadius stil na običan div element. Mehanizam rasporeda preglednika radi sav rendering — nema platna, SVG-a ni koda za crtanje treće strane.
  4. 4
    Clipboard API kopira izlaz
    Klikom na Kopiraj poziva se navigator.clipboard.writeText s CSS deklaracijom (border-radius: ...;) ili ekvivalentnom Tailwind klasom proizvoljne vrijednosti (rounded-[...]), ovisno o odabranom prekidaču formata.

Srodni alati

🎨

Generator CSS box-shadow

Vizualni alat za CSS box-shadow s živim pregledom, slaganjem više slojeva, biranjem boje, umetnutim preklopnim gumbom i kopiranjem jednim klikom. Uključuje Material, neumorfizam i sjajne predloške.

Isprobajte
🟦

CSS Grid generator

Vizualno kreirajte CSS grid — tragove, jedinice i razmake — i kopirajte generirani CSS i HTML.

Isprobajte
↔️

CSS Flexbox generator

Eksperimentirajte sa flex smjerom, zamatanjem, poravnavanjem i rastezanjem na Live stavkama — i kopirajte CSS.

Isprobajte

Često postavljana pitanja