CSS rounded corners on img in firefox
The problem is quite simple, but I spent too much time searching for answer. I'd appreciate if someone can throw a little li开发者_运维问答ght 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.
you could put the image as a background of a div then have that div have rounded corners
Here is a solution which can help you to solve this problem
http://learneveryday.net/css/css-round-corner-menu-with-image/
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>
</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;
}
精彩评论