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

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

I was able to achieve it using this code:

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

Answer 3

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 4

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 5

I prefer to use another div behind them as background and delete all the borders. You need just to calculate the size of the background div and the position of the foreground divs.

Answer 6

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