Preventing "double" borders in CSS

Question

Say I have two divs next to each other (take https://chrome.google.com/webstore/category/home as reference) with a border.

Is there a way (preferably a CSS trick) to prevent my divs from appearing like having a double border? Have a look at this image to better understand what I mean:

You can see that where the two divs meet, it appears like they have a double border.

Answer 1

If we're talking about elements that cannot be guaranteed to appear in any particular order (maybe 3 elements in one row, followed by a row with 2 elements, etc.), you want something that can be placed on every element in the collection. This solution should cover that:

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

Note that outline doesn't work in older browsers (IE7 and earlier).

Alternately, you can stick with the borders and use negative margins:

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

Demo

Include ie9.js for IE8 support (it's very useful for all CSS selectors/pseudo-elements).

Answer 4

Another solution one might consider is using the CSS Adjacent sibling selector.

The CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Answer 5

I'm late to the show but try using the outline property, like so:

.item {
  outline: 1px solid black;
}

Outlines in CSS do not occupy physical space and will therefore overlap to prevent a double border.

Answer 6

You can use odd selector to achieve this

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

If the divs all have the same class name:

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

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

There's a JSFiddle demo here.

Answer 8

Add the following CSS to the div on the right:

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

Or just remove one of the borders.

Answer 9

Using Flexbox it was necessary to add a second child container to properly get the outlines to overlap one another...

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

If you also need to change border colors on interaction (eg. swatch selector in a form), I found out a nice trick to do it, using a combination of negative margins, padding adjustment and transform translate. Check it out:

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

Answer 11

My use case was for boxes in a single row where I knew what the last element would be.

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

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