Developer ToolsGerador de Raio de Borda
Crie visualmente formas CSS complexas com border-radius e controle independente dos cantos. Visualize ao vivo e copie o código CSS pronto para uso instantaneamente.
Configurações dos Cantos
Unidade:
Visualização e Código CSS
border-radius: 8px
Abreviado
.element {
border-radius: 8px;
}Completo
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}Ferramentas Relacionadas
Sobre o Gerador de Raio de Borda
Como Funciona
- Ajuste cada canto usando os controles deslizantes ou campos numéricos
- Ative 'Vincular Todos os Cantos' para controlar os quatro cantos simultaneamente
- Selecione uma unidade (px ou %) dependendo do tipo de tamanho desejado
- Use os presets para aplicar formas comuns como círculo, pílula ou quadrado
- Personalize o fundo da visualização e a cor do elemento para uma visão realista
- Copie o CSS abreviado ou completo gerado com um clique
Casos de Uso Comuns
- Projetar botões, cards e campos de entrada com cantos arredondados
- Criar tags e badges em forma de pílula no design de UI
- Construir avatares e ícones circulares com border-radius de 50%
- Gerar formas assimétricas únicas para layouts criativos
- Prototipar componentes de UI com controle preciso dos cantos
- Aprender e experimentar com os valores de CSS border-radius
Perguntas Frequentes
O que é CSS border-radius?
CSS border-radius é uma propriedade que arredonda os cantos da caixa de borda de um elemento. Aceita de um a quatro valores que definem os raios dos cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo.
Como usar o Gerador de Raio de Borda?
Use os controles deslizantes ou campos numéricos para ajustar cada canto de forma independente. A visualização ao vivo é atualizada instantaneamente e você pode copiar o CSS gerado com um clique.
Posso definir um valor diferente para cada canto?
Sim. Desative a opção 'Vincular Todos os Cantos' para controlar cada canto (superior esquerdo, superior direito, inferior direito, inferior esquerdo) de forma independente para formas assimétricas.
Qual a diferença entre CSS abreviado e completo?
A propriedade abreviada border-radius define os quatro cantos de uma vez. As propriedades completas (border-top-left-radius etc.) definem cada canto individualmente.
Como fazer um círculo com CSS border-radius?
Defina border-radius como 50% em um elemento quadrado. Use o preset 'Círculo' nesta ferramenta para aplicá-lo instantaneamente.
Como fazer uma forma de pílula/cápsula?
Defina border-radius com um valor muito grande (por exemplo, 9999px) para criar uma forma de pílula. Use o preset 'Pílula' para aplicar com um clique.
Border-radius suporta valores percentuais?
Sim. Os valores percentuais são relativos às dimensões do elemento: 50% cria uma forma circular em um elemento quadrado. Esta ferramenta suporta unidades de pixel (px) e porcentagem (%).
O que significam dois valores no border-radius abreviado?
Com dois valores, o primeiro se aplica aos cantos superior esquerdo e inferior direito, e o segundo se aplica aos cantos superior direito e inferior esquerdo.
O CSS gerado é compatível com todos os navegadores?
Sim. A propriedade border-radius é suportada em todos os navegadores modernos e Internet Explorer 9+.
Posso visualizar a forma com uma cor de fundo?
Sim. A visualização ao vivo exibe a forma com uma cor de fundo personalizável para que você veja exatamente como os cantos arredondados ficarão.
Como redefinir para os valores padrão?
Clique no botão 'Redefinir' para restaurar todos os cantos para 8px, o valor padrão usado na maioria dos frameworks de UI.
Quais presets estão disponíveis?
Esta ferramenta inclui presets para formas comuns: Quadrado (0px), Leve (4px), Arredondado (8px), Extra Arredondado (16px), Pílula (9999px) e Círculo (50%).