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

Thanks.

Answer 1

I expected something like...

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

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

Well... I guess if it was all standardized, then they wouldn't need to be using the browser-specific prefixes.

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

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

Answer 2

What about IE??? border-radius.htc adds 2 wrapper divs, which makes selecting in jquery more complicated, plus, well there's a whole slew of problems with animating border radius in ie...