css - グラデーション上のブートストラップ ナビゲーション タブ

Question

デフォルトでは、ブートストラップ ナビゲーション タブは、アクティブなタブの上に無地の背景があるため、下の境界線は表示されません。

残念ながら、微妙なグラデーションの背景の上にタブを表示しているため、アクティブなタブと非アクティブなタブには透明な背景が必要です (白い境界線だけが必要です: http://cl.ly/image/0x2u132k2F3k )。

アクティブなタブから背景色を削除すると、下の境界線が表示されます: http://cl.ly/image/0x2H1V1W2t3a .

.nav-tabs クラスから下の境界線を削除し、単に下の境界線と非アクティブなタブを含めると、境界線はスペースの全幅に拡張されません: http://cl.ly/image/0d361q2A1F3S

アクティブなタブの背景色を使用せずに、アクティブなタブの下ではなく、アクティブなタブの下ではなく、右端まで伸びる線を実現する方法はありますか?

更新: これは問題を示すフィドルです: http://jsfiddle.net/E7ehj/

.container {
    background: -webkit-radial-gradient(center, ellipse cover, #276a75 0, #00455b 100%);
    padding: 30px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: white;
    background-color: transparent;
}
a {
    color: white;
}