CSS3 Border Radius Circle Hover

[design]

I currently have a website design using overlapping circles and I'm using an image map to handle the hover states.

I'm attempting to re-design my website without an image map and use CSS3 circles. This works nicely on Firefox but on Safari and Chrome (haven't tested with IE yet for obvious reasons) it doesn't quite work right. As you begin to mouse over a CSS3 circle, if coming in from a 'corner' the hover state fires like it were a square. I only want the hover state to fire when the mouse is actually over the circle. Firefox does this nicely but the others don't.

Am I doing something wrong in the code? Does anyone have any suggestions? I'll probably have to wait until browsers fully support border radius but I wanted to experiment.

Here's my testing site using CSS3 circles: http://www.StevenHeld.com/test
and current site using image maps: http://www.StevenHeld.com

 

[PixelPusher]

I dont believe there is a way around this issue. It is simply a case of how each browser handles CSS3 properties differently. Generally I dont even notice this, but I guess when you make the radius very large, the problem is more pronounced.

 

[ronaldroe]

PixelPusher is right. You have to keep in mind that even though you have visually created a circle, it is still a square.