Generátor CSS Border Radius — Vizuální Nastavení Zaoblených Rohů

Border-radius určuje zaoblení rohů CSS prvků. Náš generátor umožňuje nastavit každý roh samostatně a okamžitě poskytuje CSS kód.

Syntaxe border-radius

border-radius: 10px upraví všechny čtyři rohy. border-radius: 10px 20px 10px 20px je vlevo nahoře, vpravo nahoře, vpravo dole, vlevo dole. border-radius: 50 % vytvoří kruh (u čtvercového prvku). border-radius: 50px 100px vytvoří piluli.

Eliptické rohy

border-radius: 100px / 50px vytvoří eliptické rohy — horizontální poloměr 100px, vertikální poloměr 50px. To dává zaoblené obdélníky s větší designovou svobodou než standardní border-radius. Populární pro komponenty karet a hero sekce.

Pokyny pro border-radius v designu

Konzistence je klíčová — používejte stejný border-radius pro podobné prvky. Material Design od Google používá border-radius jako prominentní designový prostředek. Tlačítka: 4–8px pro seriózní aplikace, 20–50px pro hravá rozhraní. Karty: 8–16px pro většinu případů.