Evitando bordas duplicadas em CSS

Quando elementos adjacentes com bordas são colocados um ao lado do outro, um artefato visual conhecido como "bordas duplas" pode ocorrer na interseção da fronteira. Para eliminar esse efeito indesejável, considere estas abordagens CSS:

Opção 1: Usando a propriedade Outline

Para situações em que a ordem dos elementos é imprevisível, o uso da propriedade Outline pode efetivamente evitar fronteiras duplas:

.collection {
  /* Optional styling */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid; /* Replaces border */
  margin-top: 1px;
  margin-left: 1px;
}

Observe que o contorno não é compatível com navegadores mais antigos (IE7 e anteriores).

Opção 2: margens negativas com bordas

Se estiver usando bordas é preferível, utilize margens negativas para compensar a borda dupla:

.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}