Éviter les bordures dupliquées dans CSS

Lorsque des éléments adjacents avec des bordures sont placés les uns à côté des autres, un artefact visuel appelé « doubles bordures » peut se produire au carrefour frontalier. Pour éliminer cet effet indésirable, envisagez ces approches CSS :

Option 1 : Utilisation de la propriété Outline

Pour les situations où l'ordre des éléments est imprévisible, l'utilisation de la propriété outline peut empêche efficacement les doubles bordures :

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

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

Notez que le contour n'est pas pris en charge dans les anciens navigateurs (IE7 et versions antérieures).

Option 2 : Marges négatives avec bordures

Si vous utilisez des bordures est préférable, utilisez des marges négatives pour compenser la double bordure :

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