Q:

Merge borders among DIV

Here you go:
<div id="weapons_main">
  <div class="col1">.</div>
  <div class="col1">.</div>
  <div class="clear"></div>
  <div>1</div>
  <div>2</div>
</div>

CSS:
#weapons_main{
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: thin solid #869BBF;
    border-collapse: collapse;
    margin: 0 auto;
    width: 80%;
}

#weapons_main div{
    background-color: #EFF0FB;
    border: solid 5px red;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}
#weapons_main .col1{
    width: 50%;
    float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}

http://jsfiddle.net/T3v9u/
the problem is seen immediatly: the red lines are thicker than they should, because browser summarise them instead of merging it. How to dodge it?

A:

You can work with :last-child and the adjacent sibling selector (+)
#weapons_main div:last-child {
    border-top: 0;
}

#weapons_main .col1 + .col1 {
    border-left: 0;
}

DEMO
For a more advanced example you could work with :nth-child
#weapons_main .col1:nth-child(2n) {
    border-left: 0;
}

DEMO

