Button border radius and cursor

Question

CSS border radius does affect button rendering (I see it's round form), but does not affect how it interacts with the user (I still can click button outside its border). How should I fix it?

I see the behavior in Chrome.

button
{
    cursor: pointer;
    outline: none;
    background-size: 100% 100%;
    background-color: red; /*transparent;*/ /* It's actually red and ROUND. */
    background-position: center center;
    background-repeat: no-repeat;
    border: 0px;

    -webkit-border-top-left-radius: 73px;
    -webkit-border-top-right-radius: 73px;
    -webkit-border-bottom-left-radius: 73px;
    -webkit-border-bottom-right-radius: 73px;
    width: 146px; height: 146px;

    background-image: url('leftarrow.png');
}

Regards,

Answer 1

It's not actually "broken", since it's the way it's supposed to work, so you can't really fix it, all elements render as rectangles in the browser (if you inspect the round button, you'll see it covers a rectangular area)

You can either (as @Greg pointed out) use the <area> tag, or you can use JavaScript to do the following:

• If outside the circle coords, show a regular mouse icon; If inside, show a pointer
• If outside the circle coords, return false in the onclick method; If inside, return true.