html - Chrome で角を丸くしたリンクを作成することはできますか?

Question

一見どこでも検索し、複数のアプローチを試しましたが、この基本的な問題の解決策が見つかりません。角が丸いボックスの内側にリンクがはみ出さずに収まるようにします。この例は Firefox で問題なく動作するため、さらに気になります。

編集：以下の通行人は、問題をよりよく視覚化するためにこの優れた例を作成しました：http://jsfiddle.net/wjpdd/7/

この問題に対して私が見つけた最善の回避策は、JavaScript で div をクリック可能にし、css で :hover カーソルのスタイルを設定することです。しかし、誰かが持っているなら、ブートレッグの少ないオプションが大好きです

元の例:

http://jsfiddle.net/wjpdd/3/

そしてhtml：

    <div class="circle">
      <a href="#" class="fill">
        <div class="circleoutline">
        </div>
      </a>
    </div>

CSS:

.circle{
    width: 310px;
    height: 310px;
    border-radius: 155px;
    background-color: grey;
    top: 18px;
    left: 10px;
    overflow:hidden;
}

.fill{
    width: 100%;
    height: 100%;
    border-radius: 155px;
}

.circleoutline{
    position: relative;
    top:5.5px;
    left:5.5px;
    width: 295px;
    height: 295px;
    border-radius: 150px;
    -webkit-border-radius:150px;
    border: 2px solid blue;
}