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"}, 300);
    btmrightcorner.animate({"stroke": "red"}, 300);
    toprightcorner.animate({"stroke": "red"}, 300);
    topleftcorner.animate({"stroke": "red"}, 300);
}, function() {
    btmleftcorner.animate({"stroke": "black"}, 300);
    btmrightcorner.animate({"stroke": "black"}, 300);
    toprightcorner.animate({"stroke": "black"}, 300);
    topleftcorner.animate({"stroke": "black"}, 300);
});