Webkit border-radius hit area on links

HTML & CSS
1

I’ve just found an issue that is happening in Chrome and Adobe Air which uses webkit also.

On FF4 beta 7 the behavior of the border-radius is correct which limits the hit box of the link to the area of the rounded box, and what webkit does in my tests is that the hit area is still square disregarding the form created, is there a work around for this in webkit?


<!DOCTYPE html>
<html> 
<head> 
    <title>Hello World</title> 
	<style type="text/css">
		#app{
			padding: 20px;
		}
		#btn-play{
			-webkit-border-radius: 50px;
			-webkit-background-clip: padding-box;
			border-radius: 50px;
			background-color: #aeaeae;
			display: block;
			height: 100px;
			line-height: 100px;
			text-align: center;
			width: 100px;
		}
	</style>
</head> 
<body> 
    <div id="app">
    	<a href="#" id="btn-play">Play</a>
    </div>
</body> 
</html>
2

I’m sorry to say, I don’t own a single browser that doesn’t allow me to click on the invisible corners to activate the link.

3

Check it on FF4 beta 7, the hit area is limited to the rounded area not the invisible corners. Well it seems that it’s a FF4 beta 7 feature then.

Thx anyways.

4

Yeah the beta isn’t fully accessible yet, so I’m sticking with the stable releases on my machines for now. But it may be something added to the other browsers in the future.

5

In border-radius 4.4.2 the specs say:

… the area outside the curve of the border edge does not accept mouse events on behalf of the element.

It looks FF4 beta 7 is the only browsers to implement this as yet.

6

I see, thanks for the feedback guys