JSFiddle - React, Tailwind, and code Playground

HTML

<p class="click1">Click me!</p>
<p class="border1">smooth animation</p>
<hr />
<p class="click2">Click me!</p>
<p class="border2">hard animation</p>

CSS

p.border1 { border: 10px solid blue; }
p.border2 { border: 10px solid blue; }

JavaScript

$('.click1').click(function() {
    $('.border1').animate({
        borderTopColor: '#f00',
        borderRightColor: '#f00',
        borderBottomColor: '#f00',
        borderLeftColor: '#f00'
    }, 5000);
});

$('.click2').click(function() {
    $('.border2').animate({
        borderColor: '#f00'
    }, 5000);
});