Измените форму нижней границы вкладки Bootstrap Active nav-pills на сплошное подчеркивание

Попытка изменить активную вкладку Bootstrap нижней границы nav-pills на прямоугольник. Конечные точки изогнуты, и их нельзя изменить, чтобы они были сплошным подчеркиванием.

Обратитесь к этой ссылке: Bootstrap Nav Pills - JSFiddle - я не знаю, как разместить здесь ссылку jsfiddle. anwyasys. ниже код. любезно помогите. jquery выше версии 2.X. Невозможно правильно разрешить вставку ссылки jsfiddle.net

 $(document).ready(function () {console.info("highlight.js file executed...");
     $('ul.nav > li > a').click(function (e) { e.preventDefault(); $('.initial-active').removeClass('initial-active');
         $('ul.nav > li > a').removeClass('active');
         $(this).addClass('active'); 
    });
 });

<h2 class = "text-center">Bootstrap Navpills </h2><br /><ul class = "nav nav-pills text-center nav-justified ulthis"> 
    <li class = "initial-active" role = "apisolution">
        <a data-toggle = "pill" href = "#pricequoteapi">
            <img alt = "Price Quote API" src = "http://browseideas.com/wp-content/uploads/2012/02/random-mood-photography-20-575x378.png" width = "70" height = "81" /> <br /> 
            <div>PQ</div> 
        </a> 
    </li> 
    <li role = "apisolution"> 
        <a data-toggle = "pill" href = "#claimadjustapi">
            <img alt = "Claim Adjust API" src = "https://img00.deviantart.net/08d8/i/2011/040/4/7/random_photography____by_doineedtoknow-d396v4j.jpg" width = "70" height = "81" /> <br /> 
            <div>CA</div>
        </a> 
    </li> 
    <li role = "apisolution"> 
        <a data-toggle = "pill" href = "#druglistapi">
            <img alt = "Drug List API" src = "http://www.samhorine.com/imagesrandom/random8.jpg" width = "70" height = "81" /> <br /> 
            <div>DL</div> 
        </a> 
    </li> 
    <li role = "apisolution"> 
         <a data-toggle = "pill" href = "#medpricingapi">
             <img alt = "Med Pricing API" src = "https://c1.staticflickr.com/4/3864/14258413420_5717547046_z.jpg" width = "70" height = "81" /> <br />
        <div>MP</div>
        </a> 
    </li>
</ul>
<div class = "tab-content">
  <div class = "tab-pane fade in active" id = "pricequoteapi"> 
    <div> 
     <h3>PQ</h3>  
       <p>PQ section.</p> 
    </div>
   </div>
     <div class = "tab-pane fade" id = "claimadjustapi"> 
         <div> <h3>CA</h3> 
              <p>CA section</p> 
        </div> 
    </div> 
  <div class = "tab-pane fade" id = "druglistapi"> <div> <h3>DL</h3> 
    <p>DL section</p> </div> </div> <div class = "tab-pane fade" id = "medpricingapi"> <div> 
      <h3>MP</h3> <p>MP section</p> </div> </div></div>
    .nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{ color:black; background-color:white;}.initial-active{ border-bottom: 10px solid #5bc0eb;}.nav > li > a.active { border-bottom: 10px solid #5bc0eb;}.ulthis { border-bottom: 2px solid #FF5FFF;}

Изображения: Expected One - вкладка Active Nav Pills сплошно подчеркнута

Это то, что я пытаюсь решить. Обратите внимание на закругленные края активной навигационной кнопки. Хотите изменить его на "Ожидаемый" выше

Пожалуйста, обратитесь к коду в ссылке JSFiddle выше. Пожалуйста, помогите. Спасибо!