JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="content">Hello World!
    </div>
</div>
<div class="wrapper">
    <div class="content">Foo Bar
    </div>
</div>

CSS

.wrapper {
    width: 210px;
    height: 210px;
    line-height: 210px;
    text-align: center;
    padding: 0px;
}
.content {
    display: inline-block;
    height: 200px;
    width: 200px;
    border: solid 0px;
    vertical-align: middle;
    border-radius: 2000px;
    background-color: #ccc;
    margin: 0px;
}

JavaScript

$(function(){
    $(".content").mouseover(function(){
        $(this).animate({"borderLeftWidth" : "5px",
                         "borderRightWidth" : "5px", 
                         "borderTopWidth" : "5px", 
                         "borderBottomWidth" : "5px"
                        }, 300);
    }).mouseout(function(){
            $(this).animate({"borderLeftWidth" : "0px", 
                             "borderRightWidth" : "0px", 
                             "borderTopWidth" : "0px", 
                             "borderBottomWidth" : "0px"
                            }, 300);
    });
});