Image to be displayed as a circled Image using css

Here's my code - This works in chrome, firefox and safari .. I have tested it on Windows 7 However in IE 8 and Opera browser the following code is not working and instead of showing a circled image I am getting Image in square form

<div id="hotspot-img1-0">
  <ul>
    <img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web" style="width:100px;height:100px;background:#fff;border:2px solid #ccc;-moz-border-radius:52px;-webkit-border-radius:52px;">
  </ul>
</div>

CSS

#hotspot-img1-0{
    top: 570px; 
    left: 67px; 
    height: 104px; 
    width: 104px; 
    border-top-left-radius: 52px; 
    border-top-right-radius: 52px; 
    border-bottom-right-radius: 52px; 
    border-bottom-left-radius: 52px; 
    box-shadow: 0px 2px 5px 0px; 
    border-top-color: rgb(255, 255, 255); 
    border-left-color: rgb(255, 255, 255); 
    border-right-color: rgb(255, 255, 255); 
    border-bottom-color: rgb(255, 255, 255); 
    border-top-width: 2px; 
    border-left-width: 2px; 
    border-right-width: 2px; 
    border-bottom-width: 2px; 
    border-top-style: solid; 
    border-left-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid
}
开发者_如何学JAVA

---

@Sandhurst; first thing bad markup write like this:

<div>
  <ul>
    <li>
       <img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web">
    </li>
  </ul>
</div>

& Answer for the question use background-image instead of img :

li{
 background:url(image.jpg) no-repeat;
 -moz-border-radius:52px;
 -webkit-border-radius:52px;
 border-radius:52px;
width:200px;
height:200px;
}

---

The border-radius CSS3 declaration is unsupported in Internet Explorer 8 and below. You can use the -o-border-radius declaration to get rounded borders in Opera.

CSS3 Pie may help with getting rounded borders in older versions of Internet Explorer, but I'd recommend just leaving them as square images (following the principles of graceful degradation and progressive enhancement).

---

It's a CSS3 issue. IE and Opera don't handle it well. You can use a solution like http://fetchak.com/ie-css3/ to resolve it if you would like.

Good luck!

---

At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.). Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below). Update:Recent Firefox nightly versions support border-radius without the -moz- prefix. Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius). Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).

http://www.css3.info/preview/rounded-border/

---

Here is a website http://www.danielmall.com/ where the images are being displayed in circle. The author of the website has used jquery and css to get it working with both IE and firefox. Check out the page source and you will get some interesting info on how to use it.

---

Image maps could do it for you.

Clicking content below image with higher z-index

http://jsfiddle.net/u9cYZ/

http://jsfiddle.net/u9cYZ/3/

---

To my knowledge, there is no way to get Opera or IE to clip an <img> to a circle using CSS. border-radius will clip background images set in element styles though.

You might be able to clip things using SVG, but I wasn't able to get any of the examples on that page to work in Opera.