Firefox -moz-border-radius won't crop out image?

Question

Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out.

Any way to fix this without setting the image as a background image or processing it before I put it on my site?

Answer 1

Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.

--edit

OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:

img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}

But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.

Answer 2

Workaround: Set the image as the background of a container element, then add border radius on that element.

Answer 3

Workaround: Set the image as the background of a container element, then add border radius on that element.

This won't work unless the image is exactly the same size of the div. Unless you use the new css property in firefox 3.6 which allows for background image sizing, but hardly anyone is on 3.6 already.

So I agree with Alex, that is if you make the image the size of the div/other elm.

Answer 4

Here's how I did it in Ruby on Rails to work with both Firefox 3.6 and Safari 4.0.4

My avatar dimensions are 60x45. To properly occlude the background image in Firefox, subtract 2 pixels off the div width and height per pixel of border that you're using.

View code

  <% if is_firefox? %>
  <div style='float: left; background: #fff url(<%= image_path(p.user.avatar.public_filename(:extra_medium)) %>); border: 2px solid #ffffff; border-color: #ffffff; width: 56px; height: 41px; -moz-border-radius: 4px; margin: 2px;'></div>
  <% else %>
  <%= image_tag(p.user.avatar.public_filename(:extra_medium), :style => '-webkit-border-radius: 4px;') %>
  <% end %>

Firefox detector in ApplicationController

  def is_firefox?
    request.env["HTTP_USER_AGENT"].to_s.include?('Firefox') 
  end

Answer 5

I think to have the answer but sorry for my english... I resolved the question putting another div with border and no background color over the image.

#imageContainer {
  -webkit-border-radius:10px
  -moz-border-radius:10px;
  z-index:1;
}
#borderContainer {
  position:absolute;
  border:1px solid #FFFFFF;
  -webkit-border-radius:10px
  -moz-border-radius:10px;
   z-index:10;
}

Answer 6

I don't think there is a way to use -moz-border-radius to directly round an image in FireFox. But you can simulate the rounded corners the old fashioned way, with extra markup.

So that looks like this:

<div id="container">
  <img src="images/fubar.jpg" alt="situation normal" />
  <div class="rounded lt"></div>
  <div class="rounded rt"></div>
  <div class="rounded lb"></div>
  <div class="rounded rb"></div>
</div>

Then the CSS:

#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}

The background images of the corners look sort of like a crescent moon, with transparency. This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.

Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners. Use conditional comments to serve the CSS to IE6.