You can just enter a new 'path' attribute to animate to. So just amend the end points...so the hover func would be changed like this.
$("#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);
});