Gerador de Outline CSS
Configurações de estrutura de tópicos
Visualização ao vivo
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.
Verificações de CSS outline antes de estilizar o foco
Outlines não ocupam espaço e são essenciais para foco por teclado; mudanças decorativas não devem escondê-los.
Mantenha o foco visível
Não remova o outline do navegador sem substituição clara para cada elemento interativo e fundo.
Teste outline offset
Revise offsets em cantos arredondados, elementos recortados, overflow, controles adjacentes e bordas da tela.
Considere modos de contraste
Verifique indicadores no modo escuro, forced colors, contraste aumentado e temas personalizados.
Evite recortes
Inspecione overflow, transforms, regiões sticky, diálogos e scroll containers onde o outline possa ser ocultado.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.