CODEWITHSUNDEEP
jqueryhtmlcss
morne
morne

Reputation: 4169

Set divs with overlapping borders

Is there an easy way to overlap borders on divs?

Say you have this:

.box {
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
}
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

You can see a "double border" where the divs meetup. I want to show only a single 1px border between divs.

I know you can set different classes, but was wondering about an easier solution.

why is my question different well I dont have a container wrapped arounf the divs. So according to that answer the border-collapse:collapse have to be applied to the parent or wrapper element.

Upvotes: 1

Views: 410

Answers (2)

grinmax
grinmax

Reputation: 1855

Try this code

<div class="container">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>


.box {
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
  margin-bottom: -1px;
}

.box:last-child {
  margin-bottom: 0;
}

live demo - https://jsfiddle.net/8cc8hoxf/

Upvotes: 2

Zack Kirby
Zack Kirby

Reputation: 169

You have a couple of options via CSS. You could do this:

.box + .box {
    margin-top: -1px;
}

Or

.box + .box {
    border-top-width: 0px;
}

Upvotes: 6

Related Questions