1 reply to this topic

[sAuhsoj]

Is it possible to have an anchor with rounded borders. eg if I had the following:

<div style="background-color:red;height:200px;width:200px;border-radius:100px;"><a href="#" style="display:block;height:100%;width:100%;"></a></div>

the div is a red circle which I want to be a hyperlink. But the hyperlink actually becomes a 200x200 square. Large areas outside the circle are clickable. Is there anyway to stop this and have a hyperlink with rounded borders? Of course, I can just settle and use rectangular hyperlinks, but I thought it was worth asking.

Also, adding

style="border-radius:100px;"

to the anchor does nothing.

Thanks in advance.

[sAuhsoj]

I even tried the following, which didn't work either.

<div 

style="background-color:red;height:200px;width:200px;border-radius:100px;" 

onmouseover="body.style.cursor='hand'; body.style.cursor='pointer'" 

onmouseout="body.style.cursor=''" 

onclick="window.location='http://www.google.co.uk'">

</div>