Preskoči na glavno vsebino
LibraTool logoLibraTool

Generator zaobljenih robov CSS — brezplačno

Vizualno oblikujte zaobljene vogale z neodvisnim nadzorom nad vsakim vogalom. Podpira eliptično sintakso X/Y za organske oblike kapljic.

Deluje brez povezave po nalaganju
border-radius: 20px 20px 20px 20px;
Enota

Pogosta področja uporabe

  • Organski Oblikami BlobUporabite eliptično X/Y sintakso za ustvarjanje edinstvenih oblik blob za heroj sekcije in ilustracije.
  • Koti Kartice in PosodeStandardni zaobljeni koti za kartice, posode in panele v sodobnem UI oblikovanju.
  • Avatar in Oblikami Profilne SlikeUstvarite pravi slog kota za profilne slike: krožno, squircle ali zaobljenki kvadrat.
  • Pilule, Oznake in ZnačkeZgradite popolnoma zaobljene gumbe za pilule, oznake in značke s presetom 9999.
  • Asimetrični Kotni OblikovanjeMešajte polmere over kotih, da ustvarite razločljive oblike kartice in gumba, ki jih prepoznava blagovna znamka.

Kako deluje

Generator border-radius deluje v celoti v brskalniku — ni strežnika, knjižnice ali nalaganja. Zgradi niz vrednosti CSS border-radius neposredno v JavaScriptu z uporabo stanja React in useMemo, nato ga uporabi kot vrstični slog na živem elementu div, tako da lastni CSS pogon brskalnika izriše obliko v realnem času.

  1. 1
    Drsniki zapisujejo stanje
    Vsak vnos range zapisuje v eno od osmih številčnih spremenljivk stanja — štiri vodoravne polmere oglišč in štiri navpične za eliptični način. Enoten način strne vseh osem v en drsnik prek pomožne funkcije setAll, ki hkrati sinhronizira vse vrednosti.
  2. 2
    useMemo sestavi vrednost CSS
    Kljuka useMemo preračuna niz border-radius vsakič, ko se spremeni katera koli vrednost oglišča, enota (px ali %) ali preklop eliptičnega načina. V standardnem načinu ustvari štirivrednostno okrajšavo; z vklopljenim eliptičnim se doda ločilo poševnice za polno osemvrednostno skladnjo — npr. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS pogon brskalnika izriše predogled
    Izračunan niz je nastavljen kot vrstični slog borderRadius na navadnem elementu div. Celotno izrisovanje opravi pogon postavitve brskalnika — ni platna, SVG ali kode risanja tretje osebe.
  4. 4
    Clipboard API kopira izpis
    Klik na Kopiraj kliče navigator.clipboard.writeText bodisi z deklaracijo CSS (border-radius: ...;) bodisi z enakovrednim razredom Tailwind s poljubno vrednostjo (rounded-[...]), odvisno od izbranega preklopa oblike.

Sorodna orodja

🎨

Generator senčenja polj CSS

Vizualni gradnik za CSS box-shadow z živim predogledom, večplastnim zlaganjem, izbiralnikom barv, preklopo vstavka in kopiranjem z enim klikom. Vključuje prednastavitve Material, neumorfizma in sijaja.

Poskusite
🟦

Generator CSS Grid

Vizuelno oblikujte CSS mrežo — sledenje, enote in vrzeli — in kopirajte generirani CSS in HTML.

Poskusite
↔️

Generator CSS Flexbox

Poskušite z flex smerjo, zavitkem, justificiranjem in poravnavo na živih predmetih — in kopirajte CSS.

Poskusite

Pogosto zastavljena vprašanja