CSS rounded corners on img in firefox

Question

The problem is quite simple, but I spent too much time searching for answer. I'd appreciate if someone can throw a little light on the problem.

The CSS -moz-border-radius works with a div , but I'm trying to make it work on img tags.

-webkit-border-radius works flawlessly on img in Chromium.

I have also tried to wrap the img in a div , which has rounded corners and uses overflow: hidden; . It works in Chromium, but no hope in Firefox.

Answer 1

你可以把图像作为div的背景然后让div有圆角

Answer 2

I used the following to create a radius for the corners of the animated gif at the top of this page http://annsummersbysara.co.uk .

<div class="slider">
  <a href="http://annsummersbysara.co.uk/party">
    <img style="border: 0px solid ; width: 687px; height: 150px;" 
         alt="Click here to book an Ann Summers Party" 
         title="Click here to book an Ann Summers Party"
         src="images/new_top_banner.gif">
  </a>&nbsp;&nbsp;&nbsp;
</div>

And this is the css for the div.

.slider{
    width:          687px;
    height:         150px;
    border:         2px #e5e5e5 solid;
    -moz-border-radius: 8px;
    border-radius:      8px;
    margin-left:        auto;
    margin-right:       auto;
    margin-top:     5px;
    overflow:       hidden;
    text-align:     center;
}

Answer 3

Here is a solution which can help you to solve this problem

http://learneveryday.net/css/css-round-corner-menu-with-image/