How to collapse the borders of a set of div elements using CSS?

Question

I have a grid made of divs with a fixed width and a border of 1px. Now where two divs touch each other, the border becomes 2px, obviously.

How can I just get a 1px border in the whole grid?

This is what I mean:

http://jsfiddle.net/Before/4uPtj/

HTML:

<div class="gridcontainer">
  <div class="griditem"></div>
  <!-- 15 more times -->
</div>

CSS:

div.gridcontainer
{
  width: 80px;
  line-height: 0;
}

div.griditem
{
  display: inline-block;            
  border: 1px solid black;
  width: 18px;
  height: 18px;
}

Answer 1

Because of the title probably many ppl will end up here looking for solution for an actual css grid layout problem like myself. For them here's a workaround using a combination of grid-gap and box-shadow

.bar {
    max-width: 200px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1px;
}
.foo {
  box-shadow: 0 0 0 1px #000;
}

<div class="bar">
    <div class="foo">1</div>
    <div class="foo">2</div>
    <div class="foo">3</div>
    <div class="foo">4</div>
    <div class="foo">5</div>
    <div class="foo">6</div>
    <div class="foo">7</div>
    <div class="foo">8</div>
    <div class="foo">9</div>
</div>

Answer 2

I have used CCS Grid Layout (display: grid)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:before, *:after {
  box-sizing: border-box;
}

container {
  width: 100%;
  height: 100%;
}

img {
  max-width: 100%;
  display: block;
}

.grid {
	display: grid;
	background-color: #000;
	border: 1px solid #000;
	grid-gap: 1px;
	justify-self: center; 
	max-width: 282px;
	height: auto;
	margin: 0 auto;
}

.box {
  position: relative;
}

.cell::before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid #fff;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.box:hover::after {
  content: "+";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 60px;
  font-weight: bold;
}


.box:hover .cell::after {
  content: "";
  display: block;
  position: absolute;
  border: 1px solid red;
  left: -1px;
  right: -1px;
  bottom: -1px;
  top: -1px;
}

.cell {
  position: relative;
  pointer-events: none;
}

.box:hover {
  background-color: red;
}

.box:hover .cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,0,0,0.5);
}

@media only screen and (min-width: 768px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 1fr);
		max-width: 563px;
	}
}

@media only screen and (min-width: 1024px) {
	
	.grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		max-width: 1124px;
	}
}

<div class="container">
  <div class="grid">
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
  </div>
</div>

Answer 3

Here's another way to do it without negative margins: http://jsfiddle.net/e5crg405/

div.gridcontainer {
    width: 80px;
    line-height: 0;
}

div.griditem {
    display: inline-block;            
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    width: 18px;
    height: 18px;
}

div.griditem:nth-child(4n + 1) {
    border-left: 1px solid black;
}

div.griditem:nth-child(-n + 4) {
    border-top: 1px solid black;
}

Answer 4

<style>

.gridcontainer .griditem
    {
        border : 2px solid rgba(204,204,204,0.8) !important;
        margin-left:-1px; 
        margin-right:-1px;
        margin-top: -1px;
        margin-bottom: -1px;
    }
</style>

Answer 5

Could border collapse property help?

The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.

See: http://www.w3schools.com/cssref/pr_border-collapse.asp

table#myTable
{
   border-collapse:collapse;
}

Answer 6

Hi you define you your gridcontainer with according to your griditem div

as like this

css

   div.gridcontainer
    {
        width: 76px;
        line-height: 0;
        border: solid black;
        border-width: 0 1px 1px 0;
    }

    div.griditem
    {
        display:inline-block;           
        border: solid black;
        border-width: 1px 0 0 1px;
        width: 18px;
        height: 18px;
    }

HTML

<div class="gridcontainer">
    <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

​Live demo here http://jsfiddle.net/rohitazad/4uPtj/1/

Answer 7

Try this:

div.griditem
{
    display: inline-block;            
    border: 1px solid black;
    width: 18px;
    height: 18px;
    margin-left: -1px;
    margin-bottom: -1px;
}