Empêcher les bordures "doubles" en CSS

Question

Disons que j'ai deux divs l'un à côté de l'autre (prendre https://chrome.google.com/webstore/category/home comme référence) avec une bordure.

Existe-t-il un moyen (de préférence une astuce CSS) d'empêcher mes divs d'apparaître comme ayant une double bordure ? Jetez un coup d'œil à cette image pour mieux comprendre ce que je veux dire :

Vous pouvez voir qu'à l'endroit où les deux divs se rencontrent, il semble qu'ils aient une double bordure.

Answer 1

Si l'on parle d'éléments dont on ne peut pas garantir qu'ils apparaîtront dans un ordre particulier (peut-être 3 éléments dans une rangée, suivis d'une rangée avec 2 éléments, etc.), il faut quelque chose qui puisse être placé sur chaque élément de la collection. Cette solution devrait couvrir cela :

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

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

Notez que le contour ne fonctionne pas dans les navigateurs plus anciens (IE7 et antérieurs).

Vous pouvez également vous en tenir aux bordures et utiliser des marges négatives :

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

Answer 2

#divNumberOne { border-right: 0; }

Answer 3

HTML :

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS :

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

Démo

Inclure ie9.js pour la prise en charge d'IE8 (c'est très utile pour tous les sélecteurs/pseudo-éléments CSS).

Answer 4

Une autre solution que l'on peut envisager est d'utiliser le CSS Sélecteur de frères et sœurs adjacents .

Le CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Answer 5

Je suis en retard, mais essayez d'utiliser la propriété outline, comme ceci :

.item {
  outline: 1px solid black;
}

Les contours en CSS n'occupent pas d'espace physique et se chevauchent donc pour éviter une double bordure.