CSS border overlap

Question

I am applying a simple style to a complex layout:

* {
  border: 1px solid #eaeaea;
}

It works but causes all sort of additional borders. Is there a way to remove or collapse additional borders globally as I do not (nor can I) know what divs or other elements will touch???

Is there a jQuery plugin which will apply a simple border to all elements, taking this requirement into consideration?

---

EDIT :

I realize the star is a wildcard that is the effect I am after but I don't want borders to double-up or triple up

When two tandem DIV's have border defined - the center border will be a width of two - I want it to actually overlap so it's rendered as only 1px not 2 px. I cannot know what elements will have this so manually applying the styles or removing the them on a case by case basis is not acceptable.

Answer 1

You could do this :

* {
    border: 1px solid #eaeaea;
}

.no-border {
    border: none;
}

Then, attach the class no-border to all elements that should not have a border.

---

Note :

I don't think it's a great idea to set a border for all elements by default, but this technique should give you what you want.

Answer 2

* means all, use !important after your css statement but before the ';'

or apply a class to elements you want it to be to and still include the '!important'

Answer 3

I guess you are looking for avoid elements side by side having the sum of 2 borders, they should collapse instead.

Here is one way you can do to fix that.

 div { float: left; width: 33%; height: 100px; border: 1px solid black; } div.row1 ~ div.row1 { border-width: 1px 1px 1px 0; } div.row2 { border-width: 0 1px 1px 1px; } div.row2 ~ div.row2 { border-width: 0 1px 1px 0; } 

 <div class="row1"></div> <div class="row1"></div> <div class="row1"></div> <div class="row2"></div> <div class="row2"></div> <div class="row2"></div> 

Collapsing borders also are supported natively by table 's using the property border-collapse: collapse

 .table { display: table; border-collapse: collapse; width: 100%; height: 200px; } .row { display: table-row; } .cell { display: table-cell; border: 1px solid black; } 

 <div class="table"> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> </div> 

A third way would be to use negative margin

 div { float: left; width: 33%; height: 100px; border: 1px solid black; } div.row1 ~ div.row1 { margin-left: -1px; } div.row2 { margin-top: -1px; } div.row2 ~ div.row2 { margin-left: -1px; } 

 <div class="row1"></div> <div class="row1"></div> <div class="row1"></div> <div class="row2"></div> <div class="row2"></div> <div class="row2"></div>