Div grid borders

HTML

<div class="outer">
<div class="box">
    <h2>DIV</h2>
</div>
<div class="box">
    <h2>DIV</h2>
</div>
<div class="box last">
    <h2>DIV</h2>
</div>
<div class="box">
    <h2>DIV</h2>
</div>
<div class="box">
    <h2>DIV</h2>
</div>
<div class="box last">
    <h2>DIV</h2>
</div>
    <div class="box bottom">
    <h2>DIV</h2>
</div>
    <div class="box bottom">
    <h2>DIV</h2>
</div>
    <br class="clearboth" />
</div>

CSS

.box {
    width: 33.33%;
    float: left;
    box-sizing: border-box;
    display:inline-block; 
    border-right:1px solid #000;
    border-bottom:1px solid #000;
}

.outer {
    width: 100%;
    height: auto;
    line-height: 0;
    border:1px solid #000;
}

.last {border-right:0;}
.bottom {border-bottom:0;}

.clearboth {
    clear: both;
}