CodeKitHubCo je tento nástroj?
border-radius je vlastnost CSS, která zaoblí rohy prvku. Při ručním psaní vyžaduje čtyři hodnoty v pevném pořadí — vlevo nahoře, vpravo nahoře, vpravo dole, vlevo dole — což se snadno splete, zvlášť jakmile se čtyři rohy začnou lišit.
Tento nástroj odstraňuje dohady: pohněte posuvníkem, sledujte zaoblení rohu v živém náhledu a přesné CSS si přečtěte z generovaného pole kódu. Jediný přepínač zámku přepíná mezi jednotným zaoblením (všechny čtyři rohy stejné, nejběžnější případ) a čtyřmi nezávislými posuvníky pro organické, asymetrické tvary.
Proč ho používat?
- Živý náhled se aktualizuje okamžitě při tažení — žádné úpravy CSS a obnovování stránky, abyste viděli výsledek.
- Jedno kliknutí uzamkne běžný případ „stejné zaoblení na každém rohu“; odemknutím získáte pilulková tlačítka, bubliny řeči a kapkovité tvary.
- Výstupem je zkrácený zápis s jednou hodnotou, pokud se všechny rohy shodují, nebo plný zápis se čtyřmi hodnotami, když se liší — v obou případech připraveno ke zkopírování.
- Běží kompletně ve vašem prohlížeči. Nic, co zadáte, se nikam neodesílá.
- Zdarma, bez registrace, funguje i na mobilu.
Jak se používá
- Ponechte zaškrtnuté „uzamknout všechny rohy“ a přetáhněte kterýkoli posuvník pro nastavení jednotného zaoblení celého boxu.
- Odškrtněte zámek pro nezávislé ovládání každého rohu — užitečné pro pilulkové tvary, kapky a asymetrické karty.
- Sledujte, jak se náhledový box aktualizuje živě při úpravě jednotlivých posuvníků.
- Zkopírujte vygenerované CSS z pole kódu a vložte ho do vašeho stylopisu.
Příklad
Vstup
Vlevo nahoře: 40px, Vpravo nahoře: 8px, Vpravo dole: 40px, Vlevo dole: 8pxVýstup
border-radius: 40px 8px 40px 8px;Takto neshodné protilehlé rohy vytvářejí siluetu listu nebo lupínku — běžný efekt v designu karet a odznaků.
px nebo % — jakou jednotku použít?
Tento generátor vrací hodnoty v pixelech, což je správná výchozí volba pro většinu práce s UI: tlačítka, karty a vstupní pole, kde chcete pevné, předvídatelné zaoblení rohu bez ohledu na velikost prvku.
Procenta se chovají jinak — jsou relativní k vlastní šířce a výšce prvku, takže 50% zaoblení na čtvercovém prvku vytvoří dokonalý kruh a na nečtvercovém prvku elipsu. Pokud chcete tento efekt (avatary, kapkovité tvary škálující se s kontejnerem), vezměte vygenerované CSS a hodnoty v px ručně nahraďte hodnotou v % — například border-radius: 50% promění jakýkoli čtvercový box v kruh.
Běžné vzory border-radius
- Zaoblená karta: všechny rohy stejné, zhruba 8-16px pro UI komponenty.
- Pilulkové tlačítko: nastavte zaoblení na polovinu výšky prvku (nebo prostě použijte 9999px, které se automaticky ořízne na plnou pilulku bez ohledu na výšku).
- Kruhový avatar: border-radius: 50% na čtvercovém prvku (stejná šířka a výška).
- Bublina řeči: tři rohy zaoblené, jeden ostrý — nastavte tři posuvníky vysoko a jeden na 0.
- Tvar listu / lupínku: protilehlé rohy shodné, sousední rohy odlišné — např. levý horní a pravý dolní oba velké, pravý horní a levý dolní oba malé.
Kombinace se stínem
Zaoblené rohy se málokdy používají samostatně — karty a tlačítka obvykle potřebují i trochu stínu pro pocit hloubky. Použijte Generátor box-shadow k doladění vrženého stínu a aplikujte obě vygenerovaná CSS pravidla na stejný prvek.
Časté dotazy
Jaký je rozdíl mezi border-radius a pořadím rohů?
Zkrácený zápis CSS vždy dodržuje pořadí vlevo nahoře, vpravo nahoře, vpravo dole, vlevo dole, tedy po směru hodinových ručiček počínaje levým horním rohem. Čtyři posuvníky tohoto nástroje jsou popsané odpovídajícím způsobem, takže si pořadí nikdy nemusíte pamatovat sami.
Můžu pro každý roh použít jinou jednotku?
Ano, ve skutečném CSS můžete mezi rohy kombinovat px, %, em a rem, i když je to v praxi vzácné. Tento nástroj kvůli jednoduchosti generuje jednotné hodnoty v px — pokud potřebujete smíšené jednotky, kteroukoli jednotlivou hodnotu ve svém stylopisu ručně nahraďte za % nebo jinou jednotku.
Proč border-radius: 50% občas vytvoří oválný tvar místo kruhu?
Protože procenta jsou vztažena nezávisle ke každé ose — vodorovné zaoblení je procentem šířky prvku, svislé zaoblení procentem jeho výšky. Na čtvercovém prvku (stejná šířka a výška) to vytvoří dokonalý kruh, na obdélníku elipsu.
Funguje border-radius i na obrázcích na pozadí a ohraničeních?
Ano — border-radius ořízne pozadí, ohraničení a (v moderních prohlížečích) i box-shadow prvku podle zaobleného tvaru. Neořízne přetékající obsah potomků, pokud na nadřazeném prvku zároveň nenastavíte overflow: hidden.
Existuje limit, jak velké zaoblení může být?
Žádný pevný limit — pokud zaoblení přesáhne polovinu šířky nebo výšky prvku, prohlížeče ho ořežou tak, aby se obě křivky na dané straně přesně setkaly uprostřed, což je způsob, jak se čtverec stane dokonalým kruhem nebo pilulkovým tvarem.
Jak vytvořím pilulkový tvar nebo dokonalý kruh?
Pro pilulkový (kapslový) tvar nastavte zaoblení alespoň na polovinu výšky prvku — běžný trik je border-radius: 9999px, který funguje při jakékoli výšce, protože prohlížeč křivku automaticky ořízne. Dokonalý kruh potřebuje dvě věci: stejnou šířku a výšku, plus border-radius: 50%.