Ferramentas CSS/Gerador de Raio da Borda
Gerador de Raio da Borda
Crie valores CSS border-radius com controles visuais e predefinições
Controles
Editor Visual
8px
8px
8px
8px
Arraste as alças dos cantos para ajustar o raio
Raio da Borda
8px
Predefinições
Pré-visualização
200px
Pré-visualização com as configurações atuais
Código CSS
border-radius: 8px;Guia de Raio da Borda
Aprenda a criar cantos arredondados com CSS
O que é Border Radius?
A propriedade CSS border-radius arredonda os cantos da borda externa de um elemento. Você pode definir um único raio para criar cantos circulares, ou especificar diferentes raios para cada canto para criar formas mais complexas. É uma das propriedades CSS mais usadas no design web moderno.
Como Usar Esta Ferramenta
- Arraste as alças dos cantos para ajustar visualmente os valores do raio
- Ative 'Vincular Cantos' para editar todos juntos ou separadamente
- Escolha o tipo de unidade (px, % ou rem) conforme sua necessidade
- Use predefinições para padrões comuns, depois copie o CSS
Dicas Pro
Suporte do Navegador
border-radius é suportado em todos os navegadores modernos incluindo Chrome, Firefox, Safari e Edge. Tem excelente compatibilidade e é seguro para uso em produção.
Perguntas Frequentes
Como fazer um círculo perfeito com border-radius?
Defina border-radius como 50% em um elemento quadrado (largura e altura iguais). Isso cria um círculo perfeito independentemente do tamanho. Para retângulos, 50% cria uma elipse.
Qual a diferença entre unidades px e %?
Valores em pixels (px) criam cantos arredondados de tamanho fixo que não escalam com o elemento. Valores em porcentagem (%) são relativos às dimensões do elemento - 50% sempre cria o máximo arredondamento possível. Use px para cantos consistentes, % para designs responsivos.
Posso usar diferentes raios para cada canto?
Sim, border-radius aceita de 1 a 4 valores: 1 valor aplica a todos os cantos, 2 valores definem superior-esquerdo/inferior-direito e superior-direito/inferior-esquerdo, 4 valores definem cada canto individualmente (sup-esq, sup-dir, inf-dir, inf-esq).
Como criar uma forma de blob assimétrica?
Use 8 valores para controle completo: border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px. Os valores antes de '/' controlam os raios horizontais, os valores depois de '/' controlam os raios verticais para cada canto.
Border-radius afeta o conteúdo do elemento?
Border-radius apenas arredonda a borda visual. O conteúdo ainda pode transbordar para os cantos a menos que você também defina 'overflow: hidden'. Isso recorta o conteúdo para corresponder à forma arredondada, útil para imagens dentro de contêineres arredondados.