jQuery slideUp() and slideDown() with Rounded Corners

Question

Let's cut to the chase, here's the Fiddle: http://jsfiddle.net/B7Uyj/1/

Here's my current jQuery functions that handle the slideUp() and slideDown() features:

var mostRecent = "";
var timeoutID = null;
$(".notif_button").click(function(e) {
    e.stopPropagation();
    window.clearTimeout(timeoutID);
    mostRecent = $(this).parent().attr('id');
    $(this).parent().fadeOut('300');
    $("#hide_notification").slideDown('slow');
    timeoutID = window.setTimeout(function() {
        $("#hide_notification").slideUp('slow');
    }, 10000);
});

$("#undo_notif").click(function(e) {
    e.stopPropagation();
    $("#" + mostRecent).fadeIn('300');
    $("#hide_notification").slideUp('slow');
    window.clearTimeout(timeoutID);
});

I did not upload the "x" image I am using, but if you click in the areas where the image is missing (at the top right of the small notification windows), you can see how this functions.

The issue I'm having is that when I use the slideUp() and slideDown() functions, you can see the rounded corners of the div that's moving and it doesn't look like the "undo notification" truly emerged from the bottom of its parent container. This isn't an error; that's exactly how it should work. My question is, is there a way to make it look as though the yellow div that pops up is NOT separated from its parent? This is hard to explain, so please ask if you need clarification. My guess is to dynamically change the border radius as the slideUp() or slideDown() action happens.

Thanks for your help!

Answer 1

Just set overflow:hidden; to container seems to fix it:

http://jsfiddle.net/B7Uyj/5/