Demo of animation to change bottom border color using JQuery

CSS

<style>
#c1 {
    color: #006;
    background-color: #aaa;
    font-size: 25px;
    padding: 1em;
    text-align: center;
width: 180px;
height: 180px;
  }
</style>

HTML

<div id="c1">Change bottom border color by clicking the button</div>
<br><br>
<button id="b1">Change Color</button><button id="b2">Change again</button>

JQUERY

<script>
$(document).ready(function() {
$( "#b1" ).click(function() {
$( "#c1" ).animate({ borderBottomColor: "rgb( 50, 100, 20 )"},'slow');
});
////////////
$( "#b2" ).click(function() {
$( "#c1" ).animate({ borderBottomColor: "rgb( 150, 10, 160 )"},'slow');
});

})
</script>