Generátor border-radius

Deklarace border-radius může přijmout až čtyři nezávislé hodnoty rohů plus volitelnou osmihodnotovou syntaxi s lomítkem pro organické křivky – více pohyblivých částí, než si většina lidí uvědomuje, dokud nepotřebují něco nad rámec jednoduché zaoblené karty. Tento generátor zobrazuje každou z těchto částí na obrazovce: čtyři posuvníky rohů s vlastními jednotkami px nebo procenta, zkratku pro propojení všech rohů pro symetrické tvary a režim blob pro tvary, které žádná jediná hodnota poloměru nedokáže vyjádřit.

Režim rohů pokrývá tvary, po kterých lidé skutečně sahají: propojte každý roh s jedním posuvníkem pro dokonalé kruhy, pilulky a squircles, nebo je odpojte, abyste zaoblili pouze horní část rozbalovacího panelu nebo pouze jednu stranu karty. Náhled se šachovnicovým pozadím za tvarem, přepínatelný mezi světlým a tmavým podkladem, jasně ukazuje, které rohy jsou při daném poloměru oříznuty – stejný vizuální trik, který nástroje pro práci se soubory na tomto webu používají k zobrazení průhlednosti.

Režim blob je druhá polovina: osmihodnotová syntaxe CSS s lomítkem umožňuje, aby se vodorovné a svislé poloměry každého rohu lišily, což proměňuje zaoblený obdélník na organický, nepravidelný obrys. Klikněte na Náhodně pro nový tvar kdykoli a zkopírujte přesné CSS za ním – bez exportu SVG nebo externí knihovny. Přednastavené stránky pokrývají požadavky, které lidé skutečně píší do vyhledávacího pole: dokonalý kruh, pilulkové tlačítko ve tvaru stadionu, squircle ve stylu iOS a hotový organický blob.

Jako každý nástroj na tomto webu běží zcela ve vašem prohlížeči: žádné nahrávání, žádný účet a generátor funguje offline, jakmile se stránka načte.