Preskočiť na hlavný obsah
LibraTool logoLibraTool

Generátor CSS zaoblenia rohov zadarmo

Vizuálne navrhujte zaoblené rohy s nezávislou kontrolou každého rohu. Podporuje eliptickú syntax X/Y pre organické tvary.

Po načítaní funguje offline
border-radius: 20px 20px 20px 20px;
Jednotka

Bežné použitia

  • Organické Blob TvaryPoužite eliptickú X/Y syntax na vytvorenie jedinečných blob tvarov pre hero sekcie a ilustrácie.
  • Rohy Karty a KontejneraŠtandardné zaoblené rohy pre karty, kontejnery a panely v modernom UI dizajne.
  • Avatar & Tvary Profilovej FotografieVytvorte správny štýl rohu pre profilové fotografie: kruhový, squircle alebo zaoblený štvorec.
  • Pilulky, Značky a OdznakyVytvorte dokonale zaoblené tlačidlá piluliek, značky a odznaky s 9999 presetom.
  • Asymetrické Rohy DizajnuZmiešajte polomery cez rohy na vytvorenie charakteristických, značkou rozpoznávateľných tvarov kariet a tlačidiel.

Ako to funguje

Generátor border-radius beží výhradne v prehliadači — nie je tu žiadny server, žiadna knižnica a žiadne nahrávanie. Reťazec hodnoty CSS border-radius zostavuje priamo v JavaScripte pomocou React stavu a useMemo, potom ho aplikuje ako inline štýl na živý element div, takže vlastný CSS engine prehliadača vykresľuje tvar v reálnom čase.

  1. 1
    Posuvníky zapisujú stav
    Každý vstup typu range zapisuje do jednej z ôsmich číselných stavových premenných — štyri horizontálne polomery rohov a štyri vertikálne pre eliptický režim. Jednotný režim zbalí všetkých osem do jediného posuvníka cez pomocnú funkciu setAll, ktorá synchronizuje všetky hodnoty naraz.
  2. 2
    useMemo zostavuje hodnotu CSS
    Hook useMemo prepočíta reťazec border-radius vždy, keď sa zmení akákoľvek hodnota rohu, jednotka (px alebo %), alebo prepínač eliptického režimu. V štandardnom režime vytvorí skrátený zápis so štyrmi hodnotami; so zapnutým eliptickým režimom pridá lomítko-oddeľovač pre plnú osemhodnotovú syntax — napr. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS engine prehliadača vykresľuje náhľad
    Vypočítaný reťazec sa nastaví ako inline štýl borderRadius na obyčajnom elemente div. Celé vykresľovanie robí layout engine prehliadača — nie je tu žiadny canvas, žiadne SVG a žiadny kresliaci kód tretej strany.
  4. 4
    Clipboard API kopíruje výstup
    Kliknutím na Kopírovať sa volá navigator.clipboard.writeText buď s CSS deklaráciou (border-radius: ...;) alebo s ekvivalentnou Tailwind triedou s ľubovoľnou hodnotou (rounded-[...]), podľa zvoleného prepínača formátu.

Súvisiace nástroje

🎨

Generátor CSS tieňa rámčeka

Vizuálny nástroj na tvorbu CSS box-shadow so živým náhľadom, vrstvením viacerých vrstiev, výberom farby, prepínačom vnorenia a kopírovaním jedným kliknutím. Zahŕňa prednastavenia Material, neumorfizmu a záre.

Vyskúšajte
🟦

Generátor CSS mriežky

Vizuálne navrhujte CSS mriežku — stopy, jednotky a medzery — a skopírujte vygenerovaný CSS a HTML.

Vyskúšajte
↔️

Generátor CSS Flexbox

Experimentujte so smerom flex, zalomením, justifikáciou a zarovnaním na živých položkách — a skopírujte CSS.

Vyskúšajte

Často kladené otázky