Empêcher les «doubles» frontières dans CSS

Disons que j'ai deux divs côte à côte (prenez 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) pour empêcher mes divs de ressembler à une double bordure? Jetez un œil à cette image pour mieux comprendre ce que je veux dire:

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

#divNumberOne { border-right: 0; }

Si nous parlons d'éléments qui ne peuvent pas être garantis d'apparaître dans un ordre particulier (peut-être 3 éléments dans une ligne, suivis d'une ligne avec 2 éléments, etc.), vous voulez quelque chose qui puisse être placé sur chaque élément de la collection . Cette solution devrait couvrir que:

.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 anciens navigateurs (IE7 et antérieurs).

Alternativement, vous pouvez vous en tenir aux bordures et utiliser des marges négatives:

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

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

Incluez ie9.js pour le support IE8 (c'est très utile pour tous les sélecteurs / pseudo-éléments CSS).

Une autre solution à envisager consiste à utiliser le sélecteur de frères CSS Adjacent .

Le CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Vous pouvez utiliser un sélecteur impair 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>

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 une démo de JSFiddle ici.

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

.item {
  outline: 1px solid black;
}

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

Ajoutez le CSS suivant au div sur la droite:

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

Ou supprimez simplement l'une des bordures.

J'utilise juste

border-collapse: collapse;

dans l'élément parent

En utilisant Flexbox, il était nécessaire d'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;
}

  <div class="one"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>

CSS:

  .one{
    width:100px;
    height:100px;
    border:thin red solid;
    float:left;
  }
.two{
    width:100px;
    height:100px;
    border-style: solid solid solid none;

    border-color:red;
    border-width:1px;
    float:left;
}

jsFiddle

Mon cas d'utilisation concernait des boîtes sur une seule ligne où je savais quel serait le dernier élément.

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

Je sais que c'est une réaction tardive, mais je voulais juste laisser tomber mes 2 cents, car ma façon de le faire n'est pas ici.

Vous voyez, je n'aime vraiment pas jouer avec les marges, en particulier les marges négatives . Chaque navigateur semble gérer ces derniers un peu différemment et les marges sont facilement influencées par beaucoup situations.

Ma façon de m'assurer d'avoir une belle table avec des divs, est de créer d'abord une bonne structure html , puis d'appliquer le CSS.

Exemple de comment je le fais:

 <div class="tableWrap">
   <div class="tableRow tableHeaders">
     <div class="tableCell first">header1</div>
     <div class="tableCell">header2</div>
     <div class="tableCell">header3</div>
     <div class="tableCell last">header4</div>
   </div>
   <div class="tableRow">
     <div class="tableCell first">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell last">stuff</div>
   </div>
</div>

Maintenant, pour le css, j'utilise simplement la structure des lignes pour m'assurer que les bordures sont uniquement là où elles doivent être, sans aucune marge;

.tableWrap {
  display: table;
  }

.tableRow {
  display: table-row;
  }

.tableWrap .tableRow:first-child .tableCell {
  border-top: 1px solid #777777;
  }

.tableCell {
  display: table-cell;
  border: 1px solid #777777;
  border-left: 0;
  border-top: 0;
  padding: 5px;
  }

.tableRow .tableCell:first-child {
  border-left: 1px solid #777777;
  }

Et voilà, une table parfaite. Maintenant, évidemment, cela entraînerait des différences de largeur de 1px dans vos DIV (en particulier le premier), mais pour moi, cela n'a jamais créé de problème d'aucune sorte. Si tel est le cas dans votre situation, je suppose que vous dépendriez alors davantage des marges.

J'ai pu y parvenir en utilisant ce code:

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

Une question très ancienne, mais c'était le premier résultat Google, donc pour quiconque rencontre cela et ne veut pas avoir de requêtes multimédias pour rajouter la bordure à droite / gauche de l'élément sur mobile, etc.

La solution que j'utilise est:

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

Cela fonctionne car vous verrez une bordure de 2 pixels autour de l'élément constitué de la bordure et de l'ombre. Cependant, là où les éléments se rencontrent, l'ombre se chevauche, ce qui la maintient 2px de large;

Que diriez-vous de donner un margin:1px;autour de votre div.

<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
    <div class="brd"></div>
    <div class="brd"></div>
    <div class="brd"></div>
</body>
</html>

DEMO

Je préfère utiliser un autre div derrière eux comme arrière-plan et supprimer toutes les bordures. Il vous suffit de calculer la taille du div d'arrière-plan et la position des divs de premier plan.