Gerador de Outline CSS
Configurações de estrutura de tópicos
Esboço
Cor
Estado
Inativo
Visualização ao vivo
Visualização do esboço
Sobre o gerador de contorno CSS
Este gerador de contorno CSS ajuda a criar estilos de contorno para botões, entradas, cartões e estados de foco. Você pode ajustar a largura, o estilo, a cor e o deslocamento do contorno e, em seguida, copiar o CSS final.
Ao contrário das bordas, os contornos não afetam o tamanho do layout. Isso os torna úteis para anéis de foco, estados de acessibilidade e ênfase sem alterar as dimensões dos elementos.
Como usar
- Defina a largura, o estilo, a cor e o deslocamento do contorno.
- Assista à atualização da visualização ao vivo imediatamente.
- Clique em Gerar para normalizar o valor do contorno.
- Cole um valor de contorno CSS na entrada e clique em Analisar para carregá-lo de volta.
Dicas
- Use o contorno para estados de foco para que o layout não mude.
- O deslocamento de contorno positivo afasta o contorno do elemento.
- Um contorno tracejado ou pontilhado pode funcionar bem para uma interface de usuário estilo editor.
- Para acessibilidade, use cores de contorno de alto contraste.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador de raio de borda CSS
Gere e analise valores de raio de borda CSS com visualização ao vivo.
Utilitários Diversos
›
Gerador / Parser de Box Shadow CSS
Gere, analise e visualize valores de `box-shadow` CSS. Ajuste offset, blur, spread, cor e `inset`.
Utilitários Diversos
›
Gerador de sombra de texto CSS
Crie, visualize, analise e copie valores de sombra de texto CSS com múltiplas camadas de sombra.
Utilitários Diversos
›
Conversor de cores
Converta cores HEX, RGB, RGBA e HSL instantaneamente em seu navegador.
Utilitários Diversos
›
Perguntas frequentes
Qual é a diferença entre contorno e borda?
As bordas ocupam espaço e afetam o layout. Os contornos são desenhados fora do elemento e não alteram seu tamanho.
O que o deslocamento de contorno faz?
contorno-offset controla a distância entre a borda do elemento e o contorno.
O esboço é útil para acessibilidade?
Sim. O Outline é comumente usado para estados de foco visíveis em botões, links e controles de formulário.
Posso usar deslocamento de contorno negativo?
Sim. Valores negativos puxam o contorno para dentro, embora o efeito dependa do elemento e do design.