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

Vous pouvez utiliser étrange pour y parvenir

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}

<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

Answer 2

Si les divs ont tous le même nom de classe :

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

Il y a un Démonstration de JSFiddle ici.

Answer 3

Ajoutez le CSS suivant au div de droite :

position: relative;
left: -1px; /* your border-width times -1 */

Ou alors, il suffit de supprimer l'une des frontières.

Answer 4

En utilisant Flexbox, il a fallu ajouter un deuxième conteneur enfant pour que les contours se chevauchent correctement...

<div class="grid__container">
    <div class="grid__item">
        <div class="grid__item-outline">
              <!-- content -->
        </div>
    </div>
</div>

SCSS

.grid__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}

.grid__item {
    flex: 0 1 25%; // grid of 4
    margin: 0 0 1px; // margin-bottom to prevent double lines
}

.grid__item-outline {
    margin: 0 0 0 1px; // margin-left to prevent double lines
    outline: 1px solid #dedede;
}

Answer 5

Si vous avez également besoin de changer la couleur des bordures lors d'une interaction (par exemple, un sélecteur de couleurs dans un formulaire), j'ai trouvé une astuce intéressante pour le faire, en utilisant une combinaison de marges négatives, d'ajustement du padding et de transform translate. Jetez-y un coup d'œil :

.parent{
  display: flex;
  width: 100%;
  max-width: 375px;
  margin-left:1px;
}

.child {
  margin-left: -1px;/* hide double borders behind their siblings */ 
  flex: 1 0 auto;
}

.child input {
  display:none
}

.child label {
  display:block;
  border: 1px solid #eaeaea;
  min-height: 45px;
  line-height: 45px;
  cursor: pointer;
  padding: 0 10px; /* will be changed when input is checked */
  font-size: 15px;
  text-align: center;
}

.child input:checked+label {
  border: 1px solid red;
  transform: translateX(-1px);
  padding-left: 11px;
  padding-right: 9px;
  background-color: #fafafa;
}

<div class="parent">
  <div class="child">
    <input id="swatch-1" type="radio" value="1" name="option" checked="true">
    <label for="swatch-1">Element 1</label>
   </div>
   <div class="child">
    <input id="swatch-2" type="radio" value="2" name="option">
    <label for="swatch-2">Element 2</label>
   </div>
   <div class="child">
    <input id="swatch-3" type="radio" value="3" name="option">
    <label for="swatch-3">Element 3</label>
   </div>
 </div>