How to collapse the borders of a set of <div> tags using CSS?

Question

I have a grid made of DIV's with a fixed width and a border of 1 px. Now where two DIV's 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

Try this:

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

Answer 2

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 3

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 4

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 5

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 6

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

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