CSS border-radius generátor
Vytvořte CSS zkrácení border-radius z hodnot jednotlivých rohů, s eliptickými rohy a ekvivalentem Tailwind.
CSS border-radius generátor
Zadejte poloměr pro každý roh a tento nástroj vám vytvoří správné CSS zkrácení border-radius, sbalené na nejkratší platný tvar - jednu hodnotu, když se shodují všechny čtyři rohy, dvě nebo tři, když se shodují opačné rohy, a úplný seznam čtyř hodnot, když je každý roh jiný. Je navržen pro každého, kdo formuje karty, tlačítka, avatary, modály nebo vstupní pole a chce čisté, kopírovatelné CSS bez ručního počítání rohů.
Zvolte Stejně na všech rozích pro jednoduchý zaoblený obdélník nebo přejděte na Oddělené rohy, abyste každý roh nastavili nezávisle v px, procentech nebo rem. Zapnutí eliptických rohů přidá osmihodnotový zápis s lomítkem, který border-radius podporuje - vodorovný poloměr a odlišný vertikální poloměr pro každý roh, řízený jedním posuvníkem poměru, takže squircle nebo zploštělá pilulka se tvoří jedním tahem místo osmi polí. Možnost Náhodný organický blob generuje při každém spuštění nový asymetrický tvar - druh měkkého, nepravidelného obrysu používaného za hrdinnými obrázky a dekoračními bloby. Přepínejte výstup mezi zkrácením border-radius a čtyřmi rozšířenými vlastnostmi border-*-radius a zapněte možnost Tailwind, abyste získali odpovídající třídu utility s libovolnou hodnotou vedle prostého CSS.
Hodnoty jsou ověřovány při psaní: záporná čísla jsou považována za nulu a neexistuje žádný stav, který by vytvořil nesprávné CSS. Živý součet pod výstupem hlásí, kolik řádků deklarace bylo vygenerováno, kolik odlišných rohových hodnot zkrácení zmenšilo a přesný počet znaků, aktualizuje se při změně jakékoli možnosti.
Všechno běží lokálně ve vašem prohlížeči - žádná hodnota rohu ani vygenerované CSS se nikdy neposílá nikam. Zkopírujte výsledek, stáhněte si jej jako soubor .txt nebo jej pošlete přímo do vstupu jiného nástroje, abyste mohli pokračovat v práci.