Gerador de Border Radius CSS
Gerador visual de border-radius CSS. Ajuste cada canto independentemente com pré-visualização em tempo real e copie o código CSS instantaneamente.
O que é CSS border-radius?
CSS border-radius é uma propriedade que arredonda os cantos da borda externa de um elemento. Você pode definir cada canto independentemente usando um a quatro valores.
Como faço um círculo perfeito com border-radius?
Defina border-radius como 50% em um elemento quadrado (largura e altura iguais). Para uma elipse, use border-radius: 50% em um elemento retangular.
Quais unidades posso usar para border-radius?
Border-radius aceita px, %, em, rem, vw, vh e outras unidades de comprimento CSS. Porcentagens são relativas às dimensões do elemento.
Qual é a sintaxe abreviada de border-radius?
A abreviatura segue o padrão: superior-esquerdo superior-direito inferior-direito inferior-esquerdo. Um valor se aplica a todos os cantos. Dois valores definem superior-esquerdo/inferior-direito e superior-direito/inferior-esquerdo.
Posso criar cantos elípticos?
Sim, usando a sintaxe de barra (/) você pode definir raios horizontais e verticais separados. Por exemplo, border-radius: 50% / 100px cria uma curva elíptica.
Border-radius funciona em todos os elementos?
Border-radius funciona na maioria dos elementos HTML incluindo div, button, img e input. Porém, pode não recortar conteúdo estourado sem overflow: hidden.
Posso criar formas complexas com border-radius?
Sim, combinando diferentes valores de raio para cada canto, você pode criar pílulas, ovais, folhas e formas orgânicas personalizadas.
Border-radius é suportado em todos os navegadores?
Sim, border-radius é suportado em todos os navegadores modernos incluindo Chrome, Firefox, Safari, Edge e navegadores móveis.
Como faço um botão em forma de pílula?
Defina border-radius para um valor igual ou maior que a metade da altura do elemento. Para um botão de 40px de altura, use border-radius: 20px ou maior.
Border-radius afeta imagens de fundo?
Sim, border-radius recorta o fundo, a imagem de fundo e a borda de um elemento. O fundo segue automaticamente os cantos arredondados.
Posso animar border-radius?
Sim, border-radius é animável com transições e animações CSS. Você pode transicionar suavemente entre diferentes valores de raio.
Posso usar border-radius com transformações CSS?
Sim, border-radius funciona bem com transformações CSS como rotate, scale e translate.
Como crio um círculo com borda?
Aplique border-radius: 50% a um elemento quadrado com largura e altura iguais, depois adicione uma propriedade border.
Qual é a diferença entre propriedades individuais e abreviatura?
Propriedades individuais como border-top-left-radius dão controle preciso sobre cada canto. A abreviatura permite definir múltiplos cantos em uma declaração.