border-top color have to same color as active tab background color when tab is click
<p>I want to keep border-top of <code>current tab-content</code> as <code>active tab background color</code>. I Wrote below css for it but it's not applying.</p>

<pre><code>.tab-content.current{
            display: inherit;
            border-top: 5px solid #3399CC;
        }
</code></pre>

<p>if i put <code>!important</code> to <code>border-top</code> then the hover effect of border-top is not applying. For this hover effect i wrote script for it. Please help is there any other way to do it. Thanks. Hope you got my question. If not let me know.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

  $(document).ready(function() {
    $('.tab1').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #FF0000"
      });
    });
    $('.tab2').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #88DD00"
      });
    });
    $('.tab3').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #673ab7"
      });
    });
    $('.tab4').hover(function() {
      $('.tab-content').css({
        "border-top": "5px solid #336699"
      });
    });
  });

})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
  line-height: 1.6
}
.container {
  width: 800px;
  margin: 0 auto;
}
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li {
  background: #EFEFEF;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-radius: 5px 5px 0px 0px;
}
.tab1:hover {
  background: #FF0000;
  color: #fff;
  border: none;
}
.tab2:hover {
  background: #88DD00;
  color: #fff;
  border: none;
}
.tab3:hover {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab4:hover {
  background: #336699;
  color: #fff;
  border: none;
}
ul.tabs li.current {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
  border-top: 5px solid #3399CC;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="container"&gt;

  &lt;ul class="tabs"&gt;
    &lt;li class="tab-link current tab1" data-tab="tab-1"&gt;Tab One&lt;/li&gt;
    &lt;li class="tab-link tab2" data-tab="tab-2"&gt;Tab Two&lt;/li&gt;
    &lt;li class="tab-link tab3" data-tab="tab-3"&gt;Tab Three&lt;/li&gt;
    &lt;li class="tab-link tab4" data-tab="tab-4"&gt;Tab Four&lt;/li&gt;
  &lt;/ul&gt;

  &lt;div id="tab-1" class="tab-content current"&gt;
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  &lt;/div&gt;
  &lt;div id="tab-2" class="tab-content"&gt;
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum.
  &lt;/div&gt;
  &lt;div id="tab-3" class="tab-content"&gt;
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irurgdgdglit esse cillum dolore eu fugiat nulla pariatur.
  &lt;/div&gt;
  &lt;div id="tab-4" class="tab-content"&gt;
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamdfdrgdgercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  &lt;/div&gt;

&lt;/div&gt;
&lt;!-- container --&gt;</code></pre>
</div>
</div>
</p>