Generátor border-radius

Jak používat generátor border-radius

1. Táhni body na okrajích náhledu. Každý barevný bod nastavuje vodorovný poloměr jednoho rohu; když zaškrtneš Eliptické rohy (8 hodnot), bílé body nastavují svislé poloměry.
2. Nebo zadej přesné hodnoty v části Rohy: Vlevo nahoře, Vpravo nahoře, Vpravo dole a Vlevo dole, každý s polem Vodorovně a Svisle.
3. Vyber Jednotku: % (procenta boxu) nebo px (pixely). Při přepnutí se aktuální hodnoty převedou, takže tvar zůstane stejný.
4. Nastav Šířku boxu (px) a Výšku boxu (px) podle svého prvku a pomocí Všech rohů zaoblíš všechny rohy najednou.
5. Vyzkoušej Předvolby (Zaoblený, Pilulka, Kruh, List, Kapka, Vejce, Lístek a tři bloby) nebo klikni na Náhodný blob pro organický tvar.
6. Pokud dáváš přednost čtyřem deklaracím border-*-radius, zaškrtni Jednotlivé vlastnosti. Potom zkopíruj Kód CSS tlačítkem Kopírovat.

Klávesnice: vyber bod a šipkami změníš jeho poloměr o jeden krok (se Shiftem o 10).

Nástroj funguje ve tvém prohlížeči. Nic, co zadáš, se neodesílá na server.

Syntaxe border-radius

border-radius přijímá jednu až čtyři hodnoty v pořadí vlevo nahoře, vpravo nahoře, vpravo dole, vlevo dole. Stejně jako u okrajů se chybějící hodnoty přebírají z protilehlého rohu: border-radius: 10px 20px zaoblí levý horní a pravý dolní roh o 10 px a zbylé dva o 20 px. Nástroj vždy zapíše nejkratší rovnocenný tvar.

Každý roh je ve skutečnosti čtvrtina elipsy se dvěma poloměry. Lomítko odděluje vodorovné poloměry od svislých, takže vznikne až osm hodnot:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Před lomítkem jsou vodorovné poloměry čtyř rohů, za ním svislé. Pokud jsou oba seznamy stejné, část za lomítkem se vynechá.

Pixely, nebo procenta?

• px dává stejnou křivku bez ohledu na velikost prvku. Je to správná volba pro tlačítka, karty a vstupní pole: border-radius: 8px.
• % je relativní k prvku: vodorovné poloměry k jeho šířce, svislé k jeho výšce. 50% změní čtverec v kruh a obdélník v elipsu. Díky procentům se bloby škálují spolu s prvkem.

Pro tlačítko tvaru pilulky použij poloměr v pixelech alespoň o velikosti poloviny výšky. Předvolba Pilulka to udělá přesně pro zadanou velikost boxu; funguje i obří hodnota, například 999px.

Když dva sousední poloměry dohromady přesáhnou stranu, kterou sdílejí, prohlížeče všechny poloměry úměrně zmenší, dokud se nevejdou. Proto se tvar nerozbije, ani když přetáhneš dva body přes sebe.

Tvary blob

Předvolby blob a Náhodný blob používají osm procentních hodnot, u nichž dva body na každé straně dávají dohromady 100 %. Křivky na sebe pak přesně navazují a tvar vypadá jako hladký oblázek. Mezi dvěma bloby můžeš vytvořit „morfovací“ efekt pomocí CSS transition na border-radius.