Q:

CSS3 Transition border-radius issue (Delayed on hover)

I am facing a problem with CSS transition, "only with border-radius"
Basically I want to animate the border, and the problem is that when I hover it takes a second before it starts to animate. I tried setting delay to 0, and it didn't work. 
So is that a common problem? and if there is a solution show it to me.
If not, what is another way to do that?
Here my example: Fiddle
some HTML code: 
<a href=""><span  class="icon"><p>A</p></span></a>
<a href=""><span class="icon"><p>B</p></span></a>
<a href=""> <span class="icon"><p>C</p></span></a>
<a href=""> <span class="icon"><p>D</p></span></a>

Thank you everyone

A:

The problem is the border radius. You use:
border-radius: 50px;

Since the width of your element is 50px you need to use half of the with as radius which is 25px or as noted by @david-thomas use 50%.
border-radius: 50%;

See http://jsfiddle.net/DhQxV/1/
It does not matter if you use a border radius of 100px or 1000px if your width is 50px the result is the same. However if you animate the radius then it will affect your animation and cause delay.

