Generátor zaoblených rohů a tvarů
Upravte vodorovné a svislé poloměry čtyř rohů v px nebo % a zobrazte náhled tvaru. Zkopírujte nebo uložte vygenerovaný CSS s border-radius. Šířka, výška a barva náhledu nejsou v CSS zahrnuty.
Co umíte udělat
Upravit zaoblení z předvolby
Vyberte si z 8 předvoleb, mezi nimiž jsou zaoblené rohy, kapsule a list, a upravte poloměry. Výběr předvolby nahradí poloměry a jednotku.
Dát každému ze čtyř rohů jiné zaoblení
Vypněte nastavení stejného poloměru a zadejte vodorovné a svislé poloměry pro levý horní, pravý horní, pravý dolní a levý dolní roh zvlášť.
Zkontrolovat a získat CSS
Po kontrole tvaru vygenerujte CSS. Přepínejte mezi zkráceným zápisem a jednotlivými deklaracemi rohů, potom CSS zkopírujte nebo uložte jako soubor CSS.
Jak to použít
Vyberte předvolbu a jednotku
Zadejte poloměry přímo, nebo začněte úpravou z předvolby. Změna jednotky čísla nepřevádí.
Porovnat zaoblení a tvar
Zadejte jednu hodnotu pro použití stejného poloměru. Chcete-li se lišit podle rohu, zrušte volbu a upravte vodorovnou a svislou hodnotu.
V případě potřeby zkontrolujte velikost
V nastavení náhledu můžete změnit šířku, výšku a barvu náhledu. Ty se do výstupního CSS nezahrnují.
Vygenerovat CSS a poté je zkopírovat nebo uložit
Stiskněte „Vygenerovat CSS“ a zvolte požadovaný formát. Pokud změníte poloměry, jednotku nebo velikost, vygenerujte CSS znovu.
Užitečné, když
Tvarovat rohy karet a tlačítek
Když chcete vytvořit CSS pro komponenty stránky se stejným zaoblením všech čtyř rohů nebo se zaoblením pouze horních rohů.
Vytvořit asymetrické zaoblené pozadí
Když chcete změnit vodorovné a svislé zaoblení podle rohu a vytvořit obrysy připomínající listy nebo organické tvary.
Jak spolu souvisejí poloměry, jednotky a zobrazovaná velikost
Vodorovný a svislý jsou dva směry téhož rohu
Vodorovný poloměr řídí vodorovné zaoblení a svislý poloměr svislé zaoblení. Roh není zaoblený, pokud je kterákoli z hodnot 0. Zadejte čtyři rohy po směru hodinových ručiček od levého horního.
% používá šířku a výšku jako samostatné základny
Vodorovné hodnoty v % se vztahují k šířce prvku a svislé hodnoty v % k jeho výšce. I se stejnými čísly vypadá čtverec a vysoký nebo široký obdélník jinak. px určuje délku přímo.
Příliš velké poloměry se zmenší ve stejném poměru
Pokud součet sousedních poloměrů překročí délku strany, všech 8 zobrazovaných poloměrů se zmenší společným koeficientem. Zadané hodnoty a vygenerované CSS zůstávají beze změny. V podrobnostech po vygenerování můžete zkontrolovat poloměry použité pro náhled.
Rozsah obrysů, které lze vytvořit zaoblenými rohy
border-radius mění rohy na eliptické křivky. Neumí vytvořit výřezy ani libovolné mnohoúhelníky. Předvolba squircle přibližuje tvar eliptickými rohy; matematickou křivku nepřevádí přesně.
Časté dotazy
Mohu pro každý roh nastavit jiné zaoblení?
Ano. Zrušte „Použít stejný poloměr pro všechny rohy“ a zadejte vodorovný a svislý poloměr každého rohu zvlášť. Opětovné zaškrtnutí nastaví všechny poloměry na vodorovný poloměr levého horního rohu.
Převedou se čísla při změně jednotky?
Ne. Čísla zůstávají zachována, mění se pouze jednotka. Pokud po přepnutí z px na % zůstane hodnota nad 100, zadejte ji znovu v rozsahu 0–100.
Zahrnují se velikost a barva náhledu do CSS?
Ne. Výstup obsahuje pouze deklarace border-radius. Šířku, výšku a barvu pozadí nastavte na stránce nebo v komponentě, kde ji použijete.
Proč má zobrazený tvar menší zaoblení rohů, než jsou zadané poloměry?
Prohlížeč zmenší zobrazené poloměry ve stejném poměru, aby se křivky rohů nepřekrývaly. Koeficient zmenšení a hodnoty v px pro jednotlivé rohy najdete v části „Poloměry použité pro zobrazení“.
Vstup a výsledky
- Poloměry
- Zadejte všech 8 hodnot ve stejné jednotce: 0–100% nebo 0–9999px. Lze zadávat i desetinné hodnoty.
- Náhled
- Šířka a výška náhledu jsou celá čísla od 1–400px. Šířku, která se nevejde, lze v poli vodorovně posouvat.
- Výstup
- zkrácený zápis border-radius nebo deklarace pro každý ze 4 rohů. Zkopírujte nebo uložte border-radius.css.
- Není zahrnuto
- Šířka, výška, barva pozadí a export do obrázku nebo SVG.