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.
Como usar Gerador de Border Radius CSS
Crie cantos arredondados visualmente com este gerador de CSS border-radius. Tudo roda localmente no seu navegador e nenhum dado é enviado.
- Escolha px, %, em ou rem no seletor Unit.
- Arraste os controles Top Left, Top Right, Bottom Right e Bottom Left para arredondar cada canto separadamente.
- Ative Link all corners para aplicar um único valor aos quatro cantos de uma vez.
- Copie o CSS gerado na pré-visualização e cole na sua folha de estilo.
50% nos quatro cantos forma um círculo ou pílula perfeita; use em ou rem para o raio acompanhar o tamanho da sua fonte.
Ferramentas relacionadas
- Gerador de Box Shadow CSS Gerador online gratuito de box-shadow CSS. Crie sombras bonitas visualmente com deslocamento, desfoque, expansão, cor e inserção ajustáveis. Visualização ao vivo e cópia instantânea.
- Gerador de Gradientes CSS Crie gradientes CSS impressionantes visualmente. Gere gradientes lineares, radiais e cônicos com múltiplas paradas de cor, ângulos e posições. Copie código CSS pronto para produção instantaneamente.
- Gerador CSS Grid Gerador visual gratuito de CSS Grid com pré-visualização ao vivo. Crie layouts de grade responsivos interativamente e exporte código CSS pronto para produção.
- Gerador CSS Flexbox Gerador visual CSS Flexbox com visualização ao vivo. Ajuste propriedades flex e obtenha código CSS pronto para usar.
- Gerador de Border Radius Criativo Gerador de border radius criativo gratuito online. Arraste 8 pontos ou escolha uma forma blob para criar figuras CSS orgânicas e copiar o código na hora.
- Conversor de Cor Conversor de cor online gratuito. Converta formatos HEX, RGB, HSL, HSV instantaneamente com seletor visual. 100% privado, funciona no seu navegador.
- Gerador de Easing CSS Gerador online gratuito de easing CSS. Arraste os pontos de controle do cubic-bezier em uma curva interativa, escolha entre 18 presets, veja uma animação de bola em loop e copie a função de temporização na hora.
- Gerador de Text Shadow CSS Gerador online gratuito de text-shadow CSS. Empilhe várias camadas de sombra com deslocamento, desfoque, cor e opacidade, teste presets como Neon, 3D ou Retrô e copie o CSS na hora.