What's new

A click or hovering outside border-radius behaves differently in Chrome than it does in Firefox


Active member
Staff member
Say we have some content inside a circle:

div:hover {
border: 1px solid red;

<div style="padding: 1%; box-shadow: 0 0 10px #888888; overflow: hidden; border-radius: 50%;">I'm content!</div>

In firefox, if you hover anywhere just outside the circle, you will no longer have a red border.

However, in chrome, if you hover within a corner of the bounding box but outside the circle, you will still have a red border, even though you're hovering outside the circle.

The same discrepancies occur for click events.

My question is: In chrome, is there a simple way to detect that the cursor is outside the circle? CSS? JS?

Preferably, the answer would be something simple that could easily be applied to all rounded-boxes and not something like: calculate the area of the circle etc.


Continue reading...