Como remover a borda dos links com foco (outline) com CSS

Como remover a borda dos links com foco (outline) com CSS

Sabe aquela borda que aparece nos links, quando clicamos ou navegamos pela página usando o TAB, que você (ou seu cliente) acha feia? 🤦‍♂️ Aqui vai uma dica de como removê-la, mas também vou te conscientizar do porquê que não se deve fazer isso. 😠

Para remover é simples:

:focus {
	outline:0;
}

Deste modo você vai remover o outline de tudo que tem foco em seu site como links, inputs, botões, etc.

Ao remover o outline você comete um erro gravíssimo de acessibilidade! A finalidade do outline é proporcionar um feedback visual das áreas em que o usuário pode interagir com o site, possibilitando que os mesmos naveguem  pela internet exclusivamente pelo uso do teclado. O outline também é muito importante para ajudar pessoas que possuem algum tipo de deficiência visual.

Como estilizar o outline com CSS

Quer deixar o outline mais bonito e com a cara do seu site? É só estilizá-lo! 😎 É muito importante que você mantenha sempre um alto contraste com o fundo e com a cor do texto, para que o outline continue bem visível em todas as áreas do seu site.

:focus {
	outline: red solid 2px; /* color | style | width */
}

No código acima temos um exemplo de como alterar a cor, estilo e largura do outline com CSS.

Referências