Como personalizar a borda de um link através da propriedade outline

Na postagem anterior vimos como remover a borda dos links ativos ou em foco. Também aprendemos que esta borda não é uma simples decoração e que removê-la não é recomendável porque prejudica a acessibilidade do site. Nesta postagem vamos aprender a fazer justamente ao contrário: destacar a visibilidade dos links melhorando a acessibilidade. Experimente navegar nos links abaixo sem usar o mouse (utilize a tecla tab):

Link com contorno normal

Link 1

Links com contornos personalizados

Link 1
Link 2
Link 3
Link 4

Para isso inclua as seguintes regras ao CSS do site:

a:active {
   outline: 1px solid red;
a:focus {
   outline: 1px solid purple;
}

Onde:

1px = largura da borda
Possíveis valores: [ thin | medium | thick | <length> | inherit ]

solid = estilo da borda
Possíveis valores: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | inherit ]

purple = cor da borda
Possíveis valores: [ <color> | invert | inherit ]

Alguns exemplos com diferentes larguras, estilos e codificações de cores:

outline: 1px solid rgba(255, 0, 0, 0.5);

outline: 2px dashed purple;

outline: 3px dotted #0000dd;

outline: 0.5mm solid red;

outline: 0.2em solid green;

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