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

Mon cas d'utilisation concernait les cases d'une seule ligne dont je connaissais 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;
}

Answer 2

  <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

Answer 3

J'utilise juste

border-collapse: collapse;

dans l'élément parent

Answer 4

Je sais que c'est une réaction tardive, mais je voulais juste apporter mon grain de sel, puisque ma façon de faire n'est pas ici.

Tu vois, je n'aime vraiment pas jouer avec les marges, des marges particulièrement négatives . Chaque navigateur semble traiter ces éléments de manière un peu différente et les marges sont facilement influencées par un système de gestion de la qualité. lot de situations.

Ma façon de m'assurer que j'ai une belle table avec des divs, est la suivante créer d'abord une bonne structure html puis appliquer le css.

Exemple de ma façon de procéder :

 <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 rangées pour m'assurer que les bordures sont seulement là où elles doivent être, ne causant pas de marges ;

.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. Il est évident que cela entraînera des différences de largeur de 1px entre vos DIVs (en particulier le premier), mais pour moi, cela n'a jamais créé de problème d'aucune sorte. Si c'est le cas dans votre situation, je suppose que vous dépendez davantage des marges.

Answer 5

J'ai réussi à le faire 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;
}