Edit in JSFiddle

<div class="outerA outer">
    <div class="innerA inner">Example A</div>
</div>
<div class="outerB outer">
    <div class="innerB inner">Example B</div>
</div>

div {
    border: 1px solid #AAA;
    text-align: center;
    font-family: monospace;
    cursor: default;
    -webkit-transition: border-radius 0.3s ease;
       -moz-transition: border-radius 0.3s ease;
        -ms-transition: border-radius 0.3s ease;
         -0-transition: border-radius 0.3s ease;
            transition: border-radius 0.3s ease;
    -webkit-user-select: none;
       -moz-user-select: -moz-none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.outerA {
    margin: 10px;
    width: 200px;
    height: 120px;
    line-height: 8;
    border-radius: 20px;
}

.innerA.fixed {
    border-radius: 10px;
}

.innerA {
    margin: 9px;
    width: 180px;
    height: 100px;
    border-radius: 20px;
}

.outerB {
    margin: 10px;
    width: 200px;
    height: 250px;
    line-height: 16;
    border-top-left-radius: 25px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 55px;
    border-bottom-right-radius: 40px;
}

.innerB {
    margin: 14px;
    width: 170px;
    height: 220px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.innerB.fixed {
    border-top-left-radius: 10px;
    border-top-right-radius: 55px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 25px;
}
    

var overlayCssCommon = {
    "border": "1px solid rgba(0,150,200,0.4)",
    "background": "rgba(0,150,200,0.1)",
    "position": "absolute"
};

$(".outer,.inner")
.bind("mouseenter", function () {
    var $this = $(this);
    var $body = $("body");
    var topLeftRadius = $this.css("border-top-left-radius");
    var topRightRadius = $this.css("border-top-right-radius");
    var bottomLeftRadius = $this.css("border-bottom-left-radius");
    var bottomRightRadius = $this.css("border-bottom-right-radius");
    var top = $this.offset().top;
    var left = $this.offset().left;
    var width = $this.outerWidth();
    var height = $this.outerHeight();
    var overlayCss = [
        {
            "top": top,
            "left": left,
            "border-radius": topLeftRadius,
            "padding": topLeftRadius
        },
        {
            "top": top,
            "left": width + left - 2 * parseInt(topRightRadius) - 2,
            "border-radius": topRightRadius,
            "padding": topRightRadius     
        },
        {
            "top": height + top - 2 * parseInt(bottomLeftRadius) - 2,
            "left": left,
            "border-radius": bottomLeftRadius,
            "padding": bottomLeftRadius     
        },
        {
            "top": height + top - 2 * parseInt(bottomRightRadius) - 2,
            "left": width + left - 2 * parseInt(bottomRightRadius) - 2,
            "border-radius": bottomRightRadius,
            "padding": bottomRightRadius     
        }
    ];
    var id = Math.floor(Math.random()*1000000000);
    
    $.each(overlayCss, function (index, value) {
        $("<div></div>")
        .addClass("overlay")
        .css(overlayCssCommon)
        .css(value)
        .appendTo($body)
        .attr("data-overlay-value", id);
    });
    $this.attr("data-overlay-key", id);
})
.bind("mouseleave", function (event) {
    var $this = $(this);
    
    $("[data-overlay-value='" + $this.attr("data-overlay-key") + "']").remove();
    $this.removeAttr("data-overlay-key");
});
$(".inner").bind("click", function (event) {
    $(this)
    .toggleClass("fixed")
    .filter(":hover")
        .trigger("mouseleave")
    .end();
}).bind("transitionEnd webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", function (event) {
    $(this)
    .filter(":hover")
        .trigger("mouseleave")
        .trigger("mouseenter")
    .end();
});