javascript disable border-radius click event

Question

I want to disable the click event for border fields. Why are borders clickable and how can I fix it?

.circle {
    border-radius: 100px;
}

span {
    display: block;
    background: #000;
    width: 200px;
    height: 400px;
    border-radius: 100px;
}

JS Fiddle Demo

Thanks.

Answer 1

You can solve this undesired effect using CSS, because the user is not clicking in the span element, but in a (that doesn't have border-radius ).

To solve this, just remove the span element and it's styles, and style the a element instead:

a {
    display:block;
    background:#000;
    width:200px;
    height:400px;
    border-radius:100px;
}

Working demo .

Demonstration of how the a area can affect your code .

Answer 2

This is not possible, at least without a lot of very complicated maths to determine whether the click was inside the element or beyond the curves.

Remember elements have box models; so even if you curve them, they are still viewed as boxes by the browser and represented as such in the DOM. If they weren't, you'd have nearby elements seeping into the space vacated by the border radius, which doesn't happen.