How to get perfect border radius on images in all browsers?

Question

Currently I\'m getting like this in Chrome, Safari, Mobile Safari and Opera. edges are rough.

<         


        

Answer 1

/* just make sure you're including border radius for all browsers rendering engines */

.img-border{
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border:3px solid red;
}

Answer 2

I've done this effect with two divs using z-index.

<div class="picture-wrapper">
      <div class="mask">
      </div><!-- end mask -->
      <div class="picture">
           <img src="" />
      </div><!-- end picture -->
</div><!-- end picture-wrapper -->

Set your background image on mask to the red borders with the middle cut out (png), then use z-index to stack it above the picture div.

Should work cross browser, the only thing is it doesn't account for dynamic widths/height in the images, it assumes all images are the same. AND you're doing a request for that extra mask image.

Up to you.

Answer 3

You might want to try wrapping the images in a block element and floating 4 divs in all four corners with border images as a background. Make sure the image itself has an border as well, this makes using radius borders in images quite a lot easier if you have more than one size of images that needs 'm.

Answer 4

link the image in the body:

<img src="image.jpg">

add your sizing to the image:

<img src="image.jpg" width="100%" height="30%">

Then add in the inline CSS.

<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">

By adding in the inline CSS, the border and border radius will take effect on the image. Just dont style this particular image in the stylesheet because specificity may mess with the inline CSS.

Answer 5

for img tags , percent border radius work perfectly:

.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>

Answer 6

all browsers have different CSS capabilities, and handle them differently.

if you want the corners to look exactly the same in all browsers, you'll just have to put the curves in the actual image, and not rely on CSS.

An alternative is to use a background image on a div instead, which may get better clipping.