css - 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

Have you tried this instead. Then use onclick event.

http://www.w3schools.com/tags/tag_area.asp