49

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?

9 Answers 9

21

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

2
  • 4
    This may work, but OP specifically said "without setting the image as a background image". You would have to use JavaScript to set the background image if the image file needs to be dynamically specified. Sep 20, 2010 at 18:56
  • You don't have to use javascript to set the image - just do it inline in the style attribute. <div style="background:url(image.jpg); width:50px; height:50px">&nbsp;</div> Dec 10, 2011 at 15:00
19

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.

6
  • I already am using a border of 2px. I might have to remove border radiuses from these elements and wait until Mozilla gets it's act together. This might just have to be another "progressive enhancement" only for WebKit users.
    – dougoftheabaci
    Aug 28, 2009 at 17:07
  • Been playing around with SVG and hit upon a way to get rounded corners on an image element: boogdesign.com/examples/svg/rounded-corners.xhtml Will only work in Firefox 3.5 and quite probably too much work, but interesting. I'll write up a blog post about it at the weekend.
    – robertc
    Sep 2, 2009 at 14:06
  • 3
    OK, didn't wait until the weekend: boogdesign.com/b2evo/index.php/2009/09/02/…
    – robertc
    Sep 2, 2009 at 17:22
  • 1
    Firefox still doesn't support this properly as of 3.6.13. Annoying to say the least. Jan 25, 2011 at 3:56
  • 3
    Just wanted to update you that Firefox 4.0 beta (11) has a fix for this issue and the border radius is shown just as it suppose to be
    – IgalSt
    Feb 20, 2011 at 15:54
3

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;
}
0
1

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.

1

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.

3
  • 2
    As long as you're using CSS3, you'd might as well use multiple backgrounds.
    – mattbasta
    Sep 22, 2010 at 4:14
  • 2
    +1 for old fashion manual labour craftsmen-ish fixture that works everytwhere!!
    – Sam
    Mar 1, 2011 at 16:11
  • 1
    Downvoting without commenting is not only cowardly, it's not helpful to the web development community. Also, the above example does not use CSS3, and while the OP might be cool with multiple backgrounds, I was simply offering another, more backwards-compatible solution. Please also note this was in 2010, and supporting IE6 was well within the realm of possibility at that time. Jul 25, 2012 at 0:52
1
.round_image_borders {

    position:relative; // fix for IE8(others not tested)
    z-index:1; // fix for IE8(others not tested)
    width:114px;
    height:114px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior:url(border-radius.htc); // fix for IE8(others not tested)
}

I got the "border-radius.htc" script from this link:

http://code.google.com/p/curved-corner/

What it does it adds support for round corners for IE8. I also had to set position:relative and z-index, because otherwise the div(and the background image) would show under the desired div container in which the container(round_image_borders) div was put.

This works for:

FF 3.6.16

IE 8

Chrome 12.0

And yes, the image must have the same size as the div with the class round_image_borders. But this workaround is intended to be used with images that all have the same size.

1

If you use overflow: hidden it won't display the image corners sticking out.

Who knows, they still might be there, just hidden.

1
img {
 overflow: hidden;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}
0

Firefox does seem to clip a background image, so if you set an h1 background image and apply border-radius to that it will clip. (just verified in FF 3.6.12)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.