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

Question

I am currently using Chrome , Safari , Mobile Safari and Opera . the edges are rough.

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

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

Borders are beautiful in Firefox .

and in IE9, the boundary faces are fine, but it has a different problem. it shows some space between border and images

How to get the result, for example Firefox in the entire browser?

Answer 1

You can add an extra div to your img tag as follows:

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/

Answer 2

all browsers have different CSS capabilities and handle them differently.

if you want the corners to look the same in all browsers, you just need 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 improve.

Answer 3

/ * just make sure you include border radius for all browsers. * /

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

Answer 4

You might want to try wrapping images in a block element and float over 4 divs in all four corners with frames as a background. Make sure that the image itself also has a border, this makes using the radius borders in images much easier if you have more than one image size that requires "m".

Answer 5

I made 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 the background image on the mask to the red borders using middle cut (png), then use z-index to place it above the image separator.

A cross browser should work, the only thing that it does not take into account the dynamic width / height of the images, it assumes that all the images are the same. And you make a request for this additional mask image.

To you.

Answer 6

for img tags, the percentage border radius works fine:

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

Answer 7

link body image:

 <img src="image.jpg"> 

add your size to the image:

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

Then add inline CSS.

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

By adding inline CSS , the border and border of the border will take effect on the image. Just do not create this image in the stylesheet, because the specifics can go bad with inline CSS .