Evitando bordas “duplas” em CSS

Digamos que eu tenha dois divs próximos um do outro ( https://chrome.google.com/webstore/category/home como referência) com uma borda.

Existe uma maneira (de preferência um truque de CSS) para evitar que meus divs pareçam ter uma borda dupla? Dê uma olhada nesta imagem para entender melhor o que quero dizer:

Você pode ver que onde os dois divs se encontram, parece que eles têm uma borda dupla.

#divNumberOne { border-right: 0; }

Se estamos falando sobre elementos que não podem ser garantidos para aparecer em qualquer ordem particular (talvez 3 elementos em uma linha, seguidos por uma linha com 2 elementos, etc.), você quer algo que possa ser colocado em cada elemento da coleção . Esta solução deve abranger:

.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;
}

Observe que a estrutura de tópicos não funciona em navegadores mais antigos (IE7 e anteriores).

Como alternativa, você pode manter as bordas e usar margens negativas:

.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;
}

Demo

Inclui o ie9.js para suporte ao IE8 (é muito útil para todos os seletores / pseudo-elementos CSS).

Outra solução que pode ser considerada é usar o seletor CSS Adjacent Sibling .

O CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Você pode usar o seletor ímpar para conseguir isso

.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>

Se todos os divs tiverem o mesmo nome de classe:

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

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

Há uma demonstração do JSFiddle aqui.

Estou atrasado para o show, mas tente usar a propriedade outline, assim:

.item {
  outline: 1px solid black;
}

Os contornos em CSS não ocupam espaço físico e, portanto, se sobrepõem para evitar uma borda dupla.

Adicione o seguinte CSS ao div à direita:

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

Ou apenas remova uma das bordas.

Eu só uso

border-collapse: collapse;

no elemento pai

Usando o Flexbox, foi necessário adicionar um segundo recipiente filho para fazer com que os contornos se sobreponham ...

<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

Meu caso de uso era para caixas em uma única linha onde eu sabia qual seria o último elemento.

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

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

Eu sei que é uma reação tardia, mas eu só queria gastar meus 2 centavos, já que minha maneira de fazer isso não é aqui.

Você vê, eu realmente não gosto de brincar com margens, especialmente margens negativas . Cada navegador parece lidar com isso de forma um pouco diferente e as margens são facilmente influenciadas por muitas situações.

Minha maneira de ter certeza de que tenho uma boa tabela com divs, é criar uma boa estrutura html primeiro e depois aplicar o css.

Exemplo de como eu faço:

 <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>

Agora, para o css, simplesmente uso a estrutura de linhas para garantir que as bordas estejam apenas onde precisam estar, sem causar margens;

.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 voila, uma mesa perfeita. Obviamente, isso faria com que seus DIVs tivessem 1px de diferença nas larguras (especificamente o primeiro), mas para mim, isso nunca criou nenhum tipo de problema. Se isso acontecer na sua situação, acho que você dependeria mais das margens.

Consegui consegui-lo usando este código:

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

Uma pergunta muito antiga, mas foi o primeiro resultado do Google, portanto, para qualquer pessoa que se deparar com isso e não quiser ter consultas de mídia, adicione novamente a borda à direita / esquerda do elemento no celular etc.

A solução que uso é:

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

Isso funciona porque você verá uma borda de 2px ao redor do elemento feito da borda e da sombra. No entanto, onde os elementos se encontram, a sombra se sobrepõe, o que a mantém com 2px de largura;

Que tal dar um em margin:1px;torno de seu 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

Eu prefiro usar outro div atrás deles como plano de fundo e excluir todas as bordas. Você precisa apenas calcular o tamanho da div de fundo e a posição das divs de primeiro plano.