Generátor Border Radius CSS
Vizuální generátor border-radius CSS. Upravte každý roh nezávisle s živým náhledem a okamžitě zkopírujte CSS kód.
Co je CSS border-radius?
CSS border-radius je vlastnost, která zaobluje rohy vnějšího okraje prvku. Můžete nastavit každý roh nezávisle pomocí jedné až čtyř hodnot.
Jak vytvořím perfektní kruh s border-radius?
Nastavte border-radius na 50% u čtvercového prvku (stejná šířka a výška). Pro elipsu použijte border-radius: 50% u obdélníkového prvku.
Jaké jednotky mohu použít pro border-radius?
Border-radius přijímá px, %, em, rem, vw, vh a další CSS jednotky délky. Procenta jsou relativní k rozměrům prvku.
Jaká je zkrácená syntaxe pro border-radius?
Zkratka následuje vzor: levý-horní pravý-horní pravý-dolní levý-dolní. Jedna hodnota platí pro všechny rohy. Dvě hodnoty nastaví levý-horní/pravý-dolní a pravý-horní/levý-dolní.
Mohu vytvořit eliptické rohy?
Ano, pomocí syntaxe s lomítkem (/) můžete definovat oddělené vodorovné a svislé poloměry. Například border-radius: 50% / 100px.
Funguje border-radius na všech prvcích?
Border-radius funguje na většině HTML prvků včetně div, button, img a input. Bez overflow: hidden však nemusí oříznout přetékaný obsah.
Mohu vytvářet složité tvary s border-radius?
Ano, kombinací různých hodnot poloměru pro každý roh můžete vytvářet pilulky, ovály, listy a vlastní organické tvary.
Je border-radius podporován ve všech prohlížečích?
Ano, border-radius je podporován ve všech moderních prohlížečích včetně Chrome, Firefox, Safari, Edge a mobilních prohlížečů.
Jak vytvořím tlačítko ve tvaru pilulky?
Nastavte border-radius na hodnotu rovnou nebo větší než polovina výšky prvku. Pro tlačítko vysoké 40px použijte border-radius: 20px nebo vyšší.
Ovlivňuje border-radius obrázky pozadí?
Ano, border-radius ořízne pozadí, obrázek pozadí a okraj prvku. Pozadí automaticky následuje zaoblené rohy.
Mohu animovat border-radius?
Ano, border-radius je animovatelný pomocí CSS přechodů a animací. Můžete plynule přecházet mezi různými hodnotami poloměru.
Mohu použít border-radius s CSS transformacemi?
Ano, border-radius funguje dobře s CSS transformacemi jako rotate, scale a translate.
Jak vytvořím kruh s okrajem?
Použijte border-radius: 50% na čtvercový prvek se stejnou šířkou a výškou a přidejte vlastnost border.
Jaký je rozdíl mezi jednotlivými vlastnostmi rohů a zkratkou?
Jednotlivé vlastnosti jako border-top-left-radius vám dávají přesnou kontrolu nad každým rohem. Zkratka umožňuje nastavit více rohů v jednom prohlášení.
Jak používat Generátor Border Radius CSS
Navrhněte zaoblené rohy vizuálně s tímto generátorem CSS border-radius. Vše běží lokálně ve vašem prohlížeči a žádná data se nikam neodesílají.
- V rozbalovacím seznamu Unit zvolte px, %, em nebo rem.
- Posuvníky Top Left, Top Right, Bottom Right a Bottom Left posouvejte a zaoblujte každý roh zvlášť.
- Zapněte Link all corners a jednu hodnotu použijete pro všechny čtyři rohy najednou.
- Vygenerované CSS zkopírujte z náhledu a vložte do své šablony stylů.
50 % na všech rozích vytvoří dokonalý kruh nebo kapsli; s em či rem se poloměr mění spolu s typografií.
Související nástroje
- Generátor CSS Box Shadow Bezplatný online generátor CSS box-shadow. Vizuálně vytvářejte krásné stíny s nastavitelným posunem, rozostřením, šířením, barvou a inset. Živý náhled a okamžité kopírování kódu.
- Generátor CSS gradientů Vytvářejte úžasné CSS gradienty vizuálně. Generujte lineární, radiální a kuželové gradienty s více barevnými zastávkami, úhly a pozicemi. Okamžitě zkopírujte produkčně připravený CSS kód.
- Generátor CSS Grid Bezplatný vizuální generátor CSS Grid s živým náhledem. Interaktivně navrhujte responzivní mřížková rozvržení a exportujte produkční CSS kód.
- Generátor CSS Flexbox Vizuální generátor CSS Flexbox s živým náhledem. Upravte flex vlastnosti a získejte připravený CSS kód.
- Generátor border-radius Bezplatný kreativní generátor border-radius online. Tažením 8 úchopů nebo výběrem tvaru blob vytvoříte organické CSS tvary a okamžitě zkopírujete kód.
- Převodník barev Bezplatný online převodník barev. Okamžitý převod formátů HEX, RGB, HSL, HSV s vizuálním výběrem. 100% soukromí, běží ve vašem prohlížeči.
- Generátor easing CSS Bezplatný online generátor easing CSS. Přetahujte kontrolní body cubic-bezier na interaktivní křivce, vyberte si z 18 předvoleb, sledujte smyčkovou animaci koule a okamžitě zkopírujte časovací funkci.
- Generátor text-shadow CSS Bezplatný online generátor text-shadow CSS. Vrstvte více stínů s posunem, rozostřením, barvou a neprůhledností, vyzkoušejte předvolby Neon, 3D, Retro a okamžitě zkopírujte CSS.