Некорректная работа метода .animate
 

Доброго всем времени суток! У меня проблема такая жёсткая: метод .animate не желает адекватно работать с css правилом border-radius!
А именно: первая часть выполняется хорошо за указанное время, а вот вторая изменяется мгновенно, как будто это не метод .animate, а метод .css
Почему так происходит? Вот он сам код:

<div id="element">
		<div id="border_1">
		</div>
		<a href="#" class="button">Animate Me!</a>
	</div>

$(function(){
var state = true;
$('.button').click(function(){
	if(state){
		$('#border_1').animate({'borderRadius': '90px'}, 500);
	}
	else{
		$('#border_1').animate({'borderRadius': '0'}, 500);
	}
	state = !state;
})
});

Заранее большое спасибо!

вот тут написано следущее
то есть нужно изменять радиусы всех углов по отдельности

$(function(){
  var state = true;
  $('.button').click(function(){
    if(state){
      $('#border_1').animate({
        'borderBottomLeftRadius': '90px',
        'borderBottomRightRadius': '90px',
        'borderTopLeftRadius': '90px'
        'borderTopRightRadius': '90px'
      }, 500);
    } else{
      $('#border_1').animate({
        'borderBottomLeftRadius': '0',
        'borderBottomRightRadius': '0',
        'borderTopLeftRadius': '0'
        'borderTopRightRadius': '0'
      }, 500);
    }
    state = !state;
  })
});

mta88,
запятые строки 8 и 15

я тестировал с нижними радиусами, а верхние без проверки дописал :-?

Да, действительно, анимировать нужно каждое значение по отдельности, первая часть оператора прокатила как исключение из правила (может это свойство браузера такое?).
Так что спасибочки, mta88 , всё прекрасно работает!:)