How to change the border-radius of a div on hover using jquery?

Question

$('#categories').hover(
    function() {
        $(this).find('#menulist').show();
    },
    function() {
        $(this).find('#menulist').hide();
    }
)

What else should i add inside the hover function to change the border-radius property?

Answer 1

try this:

$('#categories').hover(
    function() {
        $('#menulist').show();
        $('#menulist').css('border-radius', '25px');
    },
    function() {
        $('#menulist').hide();
    }
)

Answer 2

animateCorners = function(event) {

    r = (event.type == 'mouseenter' ? 40 : 0);
    $(this).css({
        'border-top-left-radius': r,
        'border-top-right-radius': r,
        'border-bottom-right-radius': r,
        'border-bottom-left-radius': r
    });

}
$('div').hover(animateCorners, animateCorners);

jsFiddle example