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í.