html - border-box モデルがなぜか機能しない

Question

ここは実にシンプル。ボーダーボックスを選択したのに、ボーダーがボックスモデルの外側にあるのはなぜですか?

<div class="tabswitch"> 
 <a href="#" class="active">Text 1</a>
 <a href="#" class="">Text 2</a>
</div>

.tabswitch a {
    border: 5px solid #333;
    padding: 10px 46px;       
    display: inline-block;  
    box-sizing: border-box;
}
.tabswitch a.active {
    background-color: #00f;
    color: #fff;
    border: none;
}

http://jsfiddle.net/DgFZZ/2/