Появление двойного border

При неактивном сосотоянии вкладки граница должна иметь серый цвет, в активном синий. В дефолтном сосотоянии табу задаю border: 4px solid grey в активном border: 4px solid blue, но граница активного состояния не перекрывает дефолтного, а только добавляется сверху, что делать? Хочу сделаь типо такого:

    <div id="tab-container" class="tab-container">
        <ul class='etabs'>
          <li class='tab'><a href="#tabs1">Мои бронирования</a></li>
          <li class='tab'><a href="#tabs2">Личная информация</a></li>
        </ul>
        <div id="tabs1" class="content-tab">
          <h2>HTML Markup for these tabs</h2>
          <!-- content -->
        </div>
        <div id="tabs2" class="content-tab">
          <h2>JS for these tabs</h2>
          <!-- content -->
        </div>
      </div>
___________________________

.tab-container{
    width: 50%;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 10%;
    .etabs{
      display: flex;
      justify-content: left;
      margin: 0; 
      padding: 0; 
      .tab{
        display: inline-block; 
        *display:inline; 
        border-bottom: 4px solid grey;
        a{
          font-family: MuseoSans;
          font-size: 18px; 
          display: block; 
          padding: 0 10px; 
          line-height: 40px;
        }
        .active{
          border-bottom: 4px solid #426994;
          font-family: MuseoSansBold; 
        }
      }
    }
    .content-tab{
    }
  }