Evitar bordes duplicados en CSS

Cuando elementos adyacentes con bordes se colocan uno al lado del otro, se produce un artefacto visual conocido como "bordes dobles" puede ocurrir en la intersección fronteriza. Para eliminar este efecto no deseado, considere estos enfoques CSS:

Opción 1: usar la propiedad de contorno

Para situaciones en las que el orden de los elementos es impredecible, usar la propiedad de contorno puede prevenir eficazmente las fronteras dobles:

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

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

Tenga en cuenta que el esquema no es compatible con navegadores más antiguos (IE7 y anteriores).

Opción 2: Márgenes negativos con bordes

Si usa bordes Es preferible emplear márgenes negativos para compensar el doble borde:

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