アンカーをborder-radiusプロパティーを使って丸くするというのは良くやる。丸くと言っても微妙な角丸から完全な真円まで様々だけど、多かれ少なかれアンカーの確保する領域と丸くなった枠線の間に空白ができる。じゃぁその空白の部分はアンカーなのかという疑問への回答は実装依存だったというメモ。
Demo: Radial Anchor
デモではアンカーの確保する領域がわかりやすいようにoutlineプロパティーで線を引いておいた。そこに書いてあるようにInternet Explorer 10とFirefox 22ではアンカーにならずクリックできない。対してChrome 27とOpera 12はアンカーになっていてクリックできる。挙動としてはIEとFxのアンカーにならない方が素直な気がするし、らしきことがちょっと書いてある。
As ‘border-radius’ reduces the interactive area of an element authors should make sure the remaining interactive area conforms to recommended minima for the platforms they target; in particular, conforming to recommended minimum touch target sizes may require larger widths and heights when ‘border-radius’ is used.
クリックできないが正解っぽい。
丸を少しずらして重ねて、奥のをクリックしたら手前に出すみたいなギミックを作ろうとかすると、うまく奥をクリックできないみたいなことが起こる(った)。滅多に無さそうだけど忘れないように書いておいた。