JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
    <li id="blog"><a href="#">Blog</a></li>
</ul>

CSS

body { background: pink;}
li {
    display: inline-block;
    /*element size comes from size of Raphael canvas*/
    background: white;
    position: relative;
    margin: 0px auto;
    line-height: 0;
}
li a {
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    background: #333;
    width: 136px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: white;
    margin: 0 auto;
}

JavaScript

//path coords before anim
var paper = Raphael(document.getElementById("blog"), 142, 46);
var btmleftcorner = paper.path("M0 36L0 46L10 46");
var btmrightcorner = paper.path("M132 46L142 46L142 36");
var toprightcorner = paper.path("M142 10L142 0L132 0");
var topleftcorner = paper.path("M10 0L0 0L0 10");
//path attrs
btmleftcorner.attr({"stroke-width": "2"})
btmrightcorner.attr({"stroke-width": "2"})
toprightcorner.attr({"stroke-width": "2"})
topleftcorner.attr({"stroke-width": "2"})
//path attrs after anim
$("#blog").hover(function () {
    btmleftcorner.animate({"stroke": "red", path: "M0 36L0 46L146 46" }, 300);
    btmrightcorner.animate({"stroke": "red", path: "M132 46L142 46L142 0"}, 300);
    toprightcorner.animate({"stroke": "red", path: "M142 10L142 0L132 0 0 0"}, 300);
    topleftcorner.animate({"stroke": "red", path: "M10 0L0 0L0 46"}, 300);
}, function() {
    btmleftcorner.animate({"stroke": "black", path: "M0 36L0 46L10 46"}, 300);
    btmrightcorner.animate({"stroke": "black", path: "M132 46L142 46L142 36"}, 300);
    toprightcorner.animate({"stroke": "black", path: "M142 10L142 0L132 0"}, 300);
    topleftcorner.animate({"stroke": "black", path: "M10 0L0 0L0 10"}, 300);
});