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

#divNumberOne { border-right: 0; }

Answer 2

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 3

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

Answer 4

A very old question, but it was the first google result, so for anyone that comes across this and doesn't want to have media queries to re-add the border to the right/left of the element on mobile etc.

The solution I use is:

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

This works because you'll see a 2px border around the element made of the border and the shadow. However, where the elements meet, the shadow overlaps which keeps it 2px wide;

Answer 5

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 6

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