CSS border-radius generátor
Vytvorte CSS skratku border-radius z hodnôt jednotlivých rohov, s eliptickými rohmi a ekvivalentom Tailwind.
CSS border-radius generátor
Zadajte polomer pre každý roh a tento nástroj vám zostaví správnu CSS skratku border-radius, skrátenú na najkratšiu platnú formu - jednu hodnotu, keď sa zhodujú všetky štyri rohy, dve alebo tri, keď sa zhodujú opačné rohy, a kompletný zoznam štyroch hodnôt, keď je každý roh iný. Je vytvorený pre každého, kto formuje karty, tlačidlá, avatary, modály alebo polia so vstupom a chce čisté, kopírovaťelné CSS bez manuálneho počítania rohov.
Vyberte možnosť Rovnaký na všetkých rohoch pre jednoduchý zaoblený obdĺžnik, alebo prejdite na Oddelené rohy, aby ste každý roh nastavili nezávisle v px, percentách alebo rem. Zapnutie eliptických rohov pridá osemhodnotovú slash notáciu, ktorú border-radius podporuje - vodorovný polomer a odlišný vertikálny polomer pre každý roh, riadený jedným posúvačom pomeru, takže squircle alebo zploštená pílulka sa tvorí jedným ťahom namiesto ôsmich polí. Možnosť Náhodný organický blob generuje na každom spustení nový asymetrický tvar - typ mäkkého, neregulárneho obrysu používaného za heroickými obrázkami a dekoračnými blobmi. Prepínajte výstup medzi skratkou border-radius a štyrmi rozšírenými vlastnosťami border-*-radius a zapnite možnosť Tailwind, aby ste dostali zodpovedajúcu utility triedu s ľubovoľnou hodnotou popri jednoduchom CSS.
Hodnoty sú overovane počas písania: záporné čísla sa považujú za nulu a neexistuje žiadny stav, ktorý by produkoval zlý CSS. Živá súčasť pod výstupom hlási, koľko riadkov deklarácie bolo vygenerovaných, koľko odlišných rohových hodnôt skratka zmenšila a presný počet znakov, aktualizuje sa pri zmene akejkoľvek možnosti.
Všetko beží lokálne vo vašom prehliadači - hodnota žiadneho rohu alebo vygenerované CSS sa nikdy nikam nepošlú. Skopírujte výsledok, stiahnite si ho ako súbor .txt alebo ho pošlite priamo do vstupu iného nástroja, aby ste mohli pokračovať v práci.