Las fronteras dobles div deben fusionar css

Si miras este violín , verás que las fronteras no se fusionarán.
css:

div{ float:left; background-color:moccasin; width:100px; height:100px; border:1px solid tomato; } 

La cantidad de divs es aleatoria, y solo puedo darle 1 clase / id.
También tenga en cuenta que la página puede cambiar de tamaño y la cantidad de div en una fila puede cambiar.

He intentado margin-left:1px; y selectores de último hijo / enésimo hijo () pero no funcionan cuando cambia el tamaño de la pantalla o aún da bordes no deseados.

editar: NO puedo mover los divs para un solo píxel, cuando le doy a los divs margin-left:-1px; y da el primer margin-left:1px; div margin-left:1px; Obtendré resultados no deseados en las siguientes filas.

Solo agrega a la div

 margin-top: -1px; margin-left: -1px; 

verifique el siguiente ejemplo:

 div{ float:left; background-color:moccasin; width:100px; height:100px; border:1px solid tomato; margin-left: -1px; margin-top: -1px; } 
 

Podemos simular bordes colapsados ​​con box-shadow: 0 0 0 1px tomato lugar de un borde; agregue un margen izquierdo e inferior de 1px para alinearlo correctamente.

Esto funciona porque la sombra de la caja se superpone naturalmente; no ocupa espacio por sí mismo. Revelamos solo la cantidad deseada de sombra con el margen izquierdo e inferior.

Con un 1px “borde”

 div { float: left; background-color: moccasin; width: 100px; height: 100px; box-shadow: 0 0 0 1px tomato; margin: 0 0 1px 1px; /* the margin provides a little nudge as box shadow won't take up space like a border */ }