Como remover a borda de um link

Por padrão, todo navegador adiciona um retângulo em torno de um link quando ativo ou em foco. Isso é feito de forma diferente em cada navegador. O Firefox, por exemplo, cria uma borda estreita e pontilhada, indiferentemente se usamos o mouse ou o teclado, enquanto o Chrome cria uma borda mais larga e contínua, somente quando usamos o teclado. Veja um exemplo abaixo (selecione o link sem usar o mouse, use a tecla tab):

Link de teste com borda

Mas é fácil remover esta borda com CSS. Adicione o código abaixo ao CSS do site:

a {
   outline: none;
}

Repita o teste no link abaixo e confira:

Link de teste sem borda

Note que este código remove o contorno de todos os links. Para remover a borda de um link específico utilize o seguinte código:

a#test {
   outline: none;
}

Este código remove a borda do link cuja id seja test.

Por questões de acessibilidade não é recomendável remover a borda de todos os links do site. Para manter acessibilidade do seu site, não faça isso! Só remova a borda dos links que possam causar algum problema estético. Veja uma matéria muito interessante sobre isso em http://outlinenone.com (em inglês).

Note que, embora semelhantes, as propriedades outline e border são diferentes. A borda criada pela propriedade outline não "ocupa espaço" e, portanto, não interfere no posicionamento dos elementos da página, dentre outras diferenças.

Na próxima postagem vamos ver como dar mais destaque aos links através da propriedade outline, alterando a largura, o estilo e a cor da borda. Até lá!

O autor
Juarez Pereira
Unaí - MG, Brasil
Visualizar meu perfil completo