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

问题

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

img {border-radius: 10px; border:3px solid red}

See this example in Google Chrome or Opera or iPad http://jsfiddle.net/4PLUG/2/show/

Borders are fine in Firefox.

and in IE9 border edges are fine but it has a different problem. it shows some space between border and images

How to get the result like Firefox in all other browser?

回答1:

You can give extra div to your img tag like this:

body {padding:100px}

img {
   vertical-align:bottom;
    position:relative;
    z-index:-1;
}
div{
    overflow:hidden;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border:3px solid red;
    display:inline-block;
}

http://jsfiddle.net/4PLUG/4/

回答2:

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

回答3:

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.

回答4:

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.

回答5:

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.

回答6:

for img tags , percent border radius work perfectly:

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

回答7:

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.

来源：https://stackoverflow.com/questions/8444645/how-to-get-perfect-border-radius-on-images-in-all-browsers

标签

css

cross-browser