Geek Answers Handbook

CSS rounded corners on img in firefox

The problem is quite simple, but I spent too much time searching for an answer. I would appreciate it if someone could talk a little about the problem.

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

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

I also tried wrapping img in a div that has rounded corners and uses overflow: hidden; . It works in Chromium, but there is no hope in Firefox.

+4
source share
3 answers

you can put the image as the background of the div, then this div has rounded corners.

+11
source

Here is a solution to help you solve this problem.

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

+1
source

I used the following to create a radius for the corners of an 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; }
+1
source

More articles:


All Articles