Tabs with Border botton

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<div  class="tabbable">
              <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">Section 1</a></li>
                <li class=""><a data-toggle="tab" href="#tab2">Section 2</a></li>
                <li class=""><a data-toggle="tab" href="#tab3">Section 3</a></li>
              </ul>
              <div class="tab-content">
                <div id="tab1" class="tab-pane active">
                  <p>I'm in Section 1.</p>
                </div>
                <div id="tab2" class="tab-pane">
                  <p>Howdy, I'm in Section 2.</p>
                </div>
                <div id="tab3" class="tab-pane">
                  <p>What up girl, this is Section 3.</p>
                </div>
              </div>
            </div>

CSS

.tabbable {
    margin: 10px;
    height: 300px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.nav-tabs {
    margin: 0;
}

.tab-content {
    height: 100%; 
    border-left: 1px solid #ccc ; 
    border-right: 1px solid #ccc;
}