jQuery animate css border-radius property (webkit, mozilla)

Question

Is there a way in jQuery to animate the css3 border-radius property available in Webkit and Mozilla browsers?

I haven't found a plugin that will do it.

-webkit-border-radius  -moz-border-radius 

Answer 1

I originally expected that something like...

$("selector")   .css({borderRadius: 10});   .animate({borderRadius: 30}, 900); 

...would work. But, I was wrong: Webkit allows you to set the value for all four corners via borderRadius, but won't let you read it back - so with the code above, the animation will always start at 0 instead of 10. IE has the same problem. Firefox will let you read it back, so everything works as expected there.

Well... border-radius has sort of a history of implementation differences.

Fortunately, there's a work-around: just specify each corner radius individually:

$("selector")   .css({     borderTopLeftRadius: 10,      borderTopRightRadius: 10,      borderBottomLeftRadius: 10,      borderBottomRightRadius: 10 })   .animate({     borderTopLeftRadius: 30,      borderTopRightRadius: 30,      borderBottomLeftRadius: 30,      borderBottomRightRadius: 30}, 900); 

Note that if you wish to maintain compatibility with older browsers, you can go all-out and use the old browser-prefixed names:

$("selector")   .css({     borderTopLeftRadius: 10,      borderTopRightRadius: 10,      borderBottomLeftRadius: 10,      borderBottomRightRadius: 10,     WebkitBorderTopLeftRadius: 10,      WebkitBorderTopRightRadius: 10,      WebkitBorderBottomLeftRadius: 10,      WebkitBorderBottomRightRadius: 10,      MozBorderRadius: 10    })   .animate({     borderTopLeftRadius: 30,      borderTopRightRadius: 30,      borderBottomLeftRadius: 30,      borderBottomRightRadius: 30,     WebkitBorderTopLeftRadius: 30,      WebkitBorderTopRightRadius: 30,      WebkitBorderBottomLeftRadius: 30,      WebkitBorderBottomRightRadius: 30,      MozBorderRadius: 30    }, 900);  

This starts to get pretty crazy though; I would avoid it if possible.

Answer 2

Use cssHooks.

This will help you out:

http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/

Links to the cssHooks:

https://github.com/brandonaaron/jquery-cssHooks

Good luck!