JSFiddle - React, Tailwind, and code Playground
HTML
<div></div>
CSS
div {
width:100px;
height:100px;
border: 1px solid #ccc;
}
JavaScript
animateCorners = function(event) {
r = (event.type == 'mouseenter' ? 40 : 0);
$(this).css({
'border-top-left-radius': r,
'border-top-right-radius': r,
'border-bottom-right-radius': r,
'border-bottom-left-radius': r
});
}
$('div').hover(animateCorners, animateCorners);