Usando pseudo elemento (s)
Você pode posicionar um pseudo elemento de forma que fique atrás do elemento e maior, criando um efeito de borda com seu próprio fundo, ou menor e dentro (mas certifique-se de que o conteúdo seja posicionado no topo).
O elemento que precisa de várias bordas deve ter sua própria borda e posicionamento relativo.
.borders ( position: relative; border: 5px solid #f00; )A borda secundária é adicionada com um pseudo elemento. É definido com posicionamento absoluto e inserido com valores superior / esquerdo / inferior / direito. Ele também terá uma borda e é mantido abaixo do conteúdo (preservando, por exemplo, a capacidade de seleção do texto e a capacidade de clique dos links), atribuindo-lhe um valor de índice z negativo. Cuidado com o índice z negativo, se estiver dentro de outro elemento com sua própria cor de fundo, pode não funcionar.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Veja a Pen gbgRqZ de Chris Coyier (@chriscoyier) no CodePen.
Você pode fazer uma terceira borda usando a :afterpseudo classe também. Observe que o Firefox 3 (pré 3.6) estraga isso ao apoiar :aftere :before, mas não permitir que eles sejam posicionados de forma absoluta (por isso parece estranho).
Usando esboço
Embora seja um pouco mais limitado do que a borda (contorna o elemento inteiro, não importa o que aconteça), o contorno é uma borda extra livre.
.borders ( border: 5px solid blue; outline: 5px solid red; )Usando box-shadow
Você pode usar a sombra de caixa para fazer um efeito de borda, fazendo com que a sombra se desloque e tenha 0 desfoque. Além disso, separando os valores por vírgula, você pode ter quantas "bordas" desejar:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Veja o Pen xbgreX de Chris Coyier (@chriscoyier) no CodePen.
Usando um fundo cortado
Você pode fazer o fundo de um elemento parar antes do preenchimento. Dessa forma, a borda normal de um elemento pode, de certa forma, parecer uma borda dupla.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Em uma entrada:
Veja o efeito Pen Double border de Chris Coyier (@chriscoyier) no CodePen.