Div grid borders

HTML

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

CSS

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

.outer {
    width: 100%;
    height: auto;
    line-height: 0;
    border-left:1px solid black;
    border-top:1px solid black;
}

.clearboth {
    clear: both;
}