<div> “circle” browser consistency, border-radius

Question

As a test I tried making a <div> appear as a circle. The <div> has some text inside of it but otherwise is empty.

Then in JavaScript I calculate the offsetWidth and offsetHeight , use the maximum of the two, and assign it to a variable named diameter (although realistically the width would probably always be larger). I use diameter to assign the <div> its width, height, and borderRadius. The result is something that looks like a circle (at least in Chrome, Firefox, Opera, and Safari. I have not tested IE).

Testing in Chrome, Firefox, Opera, and Safari I noticed that this behaves differently for CSS hover and JavaScript onmousedown when the cursor is just outside the area of the circle but inside the area of the rectangle that would be visible if border-radius was not set.

Here's the results when the cursor is in that spot:

• Chrome: hover and onmousedown affected outside the circle
• Firefox: hover and onmousedown only affected inside the circle
• Opera: hover and onmousedown affected outside the circle
• Safari: hover and onmousedown affected outside the circle

The behavior Firefox has is the one I'd like to consistently use, is there a way to make this possible?

Edit : If you find a solution please explain what browser you are using.

Answer 1

It seems that this issue is already fixed in Chrome 30 Canary. So the upcoming releases of Chrome and Opera (which has recently switched to Chrome's rendering engine) should behave the same way as Firefox. IE10 already behaves this way.

Answer 2

Have you tried using css hacks so that you can set specific css types depending on the Browser that the user is using. Here is a site that gives an explanation:

http://www.paulirish.com/2009/browser-specific-css-hacks/

If not here is a fiddle of a circle:

http://jsfiddle.net/rPtAV/6/

Here is the css that I used:

.circle {
    padding: 20px;
    background: red;
    width: 20px;
    border-radius: 20000px;
    height: 20px;
}