border-top color have to same color as active tab background color when tab is click

Question

I want to keep border-top of current tab-content as active tab background color. I Wrote below css for it but it's not applying.

.tab-content.current{
            display: inherit;
            border-top: 5px solid #3399CC;
        }

if i put !important to border-top 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.

$(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"
      });
    });
  });

})

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

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

  <div id="tab-1" class="tab-content current">
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum.
  </div>
  <div id="tab-3" class="tab-content">
    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.
  </div>
  <div id="tab-4" class="tab-content">
    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.
  </div>

</div>
<!-- container -->

Answer 1

Do you need like this?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

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

  <div id="tab-1" class="tab-content current">
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum.
  </div>
  <div id="tab-3" class="tab-content">
    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.
  </div>
  <div id="tab-4" class="tab-content">
    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.
  </div>

</div>
<script>
$(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,.tab2,.tab3,.tab4').mouseover(function() {
		bcolor=$('.tab-content').css("border-top");
	});
	
    $('.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"
      });
    });
	
	
    $('.tab1,.tab2,.tab3,.tab4').mouseout(function() {
		$('.tab-content').css("border-top",bcolor);
	});
	
  });

})
</script>
<style>
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;
}
</style>

Answer 2

Try this:

$(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() {
 if($(this).hasClass('current')){
$('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
}else{
$('.tab-content').css({
        "border-top": "5px solid #FF0000"
      });}
     
    });
    $('.tab2').hover(function() {          
      if($(this).hasClass('current')){
        $('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
     }else{
      $('.tab-content').css({
        "border-top": "5px solid #88DD00"
      });
      }
    });
    $('.tab3').hover(function() {
      if($(this).hasClass('current')){
        $('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
     }else{
      $('.tab-content').css({
        "border-top": "5px solid #673ab7"
      });
      }          
    });
    $('.tab4').hover(function() {
      if($(this).hasClass('current')){
        $('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
     }else{
      $('.tab-content').css({
        "border-top": "5px solid #336699"
      });
      }
     
    });
  });

})

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

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

  <div id="tab-1" class="tab-content current">
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum.
  </div>
  <div id="tab-3" class="tab-content">
    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.
  </div>
  <div id="tab-4" class="tab-content">
    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.
  </div>

</div>
<!-- container -->