So I was creating a design and when I tested it the border was a bit out on the left from the content. It didn't create a border right around the content inside, it created a bigger border.

HTML

```
<ul id="profile_stats">
<li class="top"><b>100</b><br /><i>short</i></li>
<li class="top"><b>100</b><br /><i>long</i></li>
<li class="top"><b>100</b><br /><i>images</i></li><br />
<li class="bottom"><b>10</b><br /><i>friends</i></li>
<li class="bottom"><b>10</b><br /><i>followers</i></li>
</ul>

```

CSS

```
ul#profile_stats {
    float: right;
    list-style-type: none;
    border-radius: 5px;
    margin-right: 10px;
    border: 1px solid #222;
    width: 180px;
}

ul#profile_stats li {
    float: left;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul#profile_stats .top {
    width: 60px;
    background: #B0B0B0;
    border-bottom: 1px solid #FFF;
}

.top:not(:nth-of-type(1)) {
    border-left: 1px solid #FFF;
}

.top:not(:nth-of-type(3)) {
    border-right: 1px solid #000;
}

ul#profile_stats .bottom {
    width: 90px;
    background: #555;
    border-top: 1px solid #000;
}

```

JSFiddle: <http://jsfiddle.net/rU8N9/8/>