Problem with rounded corners on image

[dedobleve]

I’m trying to apply rounded corners with a 2 pixel border to an image using border-radius. The image itself has rounded corners, but it doesn’t apply the border on the corners. Is this possible using CSS only, or do I need to call on something from jQuery?

http://www.serenfarm.com/test1706/horses-for-sale-image.html

[img]http://www.serenfarm.com/test1706/images/screenshot.jpg[/img]

Code:

.horse-headshot {
float: left;
margin-right: 10px;
position: absolute;
vertical-align: top;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 2px solid #313b3e;
}

[AshtonSanders]

In Firefox3.5: It looks like what is actually happening is that your borders have the rounded corner, but your image does not. Additionally, the border is going behind the image, so it disappears.

Rounded corners doesn’t work in all browsers…. and looks like it will look different in every browser. Peronslly, I would just build the border into the image (instead of using CSS to do it) to make sure it always looks the same in ever browser.

Side note: Why do you have "position: absolute" assigned to this image? Float:left is all you need.

[TeMc]

Although I’m not sure, a way around this issue of img-corners sticking out is to wrap the IMG in a div, and apply the corners to that and then overflow:hidden;

Code:

.horse-headshot {
vertical-align: top;
margin-right: 10px;
float: left;
width: 147px;
height: 202px;
overflow: hidden;
border: 2px solid #313b3e;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

[vladyn]

This isn’t working at all – I also need a solution for rounding a corners of an image, but without border. Currently I’m doing this by adding 4 additional div’s with absolute position inside the div, where the image is.
Please if anyone have some working solution on this – will be very thankful.
p.s. i don;t care to be working in IE6 off course

[doobie]

http://maxvoltar.com/archive/rounded-corners-on-images-css-only?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+maxvoltar+%28maxvoltar%29&utm_content=Google+Reader

This should fix you up.

-J

[Author]

Posts