Button border radius and cursor

问题:

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,

回答1:

how are you?

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.

I hope this helps, let me know if you need help with the JS code.

Cheers!

回答2:

Have you tried this instead. Then use onclick event.

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

回答3:

I think that the only solution is use inline SVG and tag circle.

I guess that browser render div as rectangle, and dont care about border radius (because this corner still belongs to rectangle).