CODEWITHSUNDEEP
firefoxcss
dougoftheabaci
dougoftheabaci

Reputation:

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

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?

Upvotes: 49

Views: 50628

Answers (9)

insign
insign

Reputation: 5783

img {
 overflow: hidden;

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

Upvotes: 1

Christian
Christian

Reputation: 3721

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

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

Upvotes: 1

Erik Čerpnjak
Erik Čerpnjak

Reputation: 419

.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.

Upvotes: 1

Dave Rau
Dave Rau

Reputation: 103

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)

Upvotes: 0

fisherwebdev
fisherwebdev

Reputation: 12690

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.

Upvotes: 1

Max
Max

Reputation: 31

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

Upvotes: 3

Dale Larsen
Dale Larsen

Reputation: 11

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.

Upvotes: 1

Alex
Alex

Reputation: 243

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

Upvotes: 21

robertc
robertc

Reputation: 75707

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.

Upvotes: 19

Related Questions