7

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

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

enter image description here

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

enter image description here

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

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • Adding border-radius to the images directly isn't really the best solution with the browser versions we have at this time, you might have more luck with wrapping another element around it and setting your border-radius on that element. – ChrisR Dec 09 '11 at 11:16
  • Google Chrome is continuously upgrading browser but why they don't think about this. I think maybe because of it's problem in Webkit rendering engine – Jitendra Vyas Dec 09 '11 at 11:21

7 Answers7

10

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/

sandeep
  • 91,313
  • 23
  • 137
  • 155
3

/* 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;
}
Yusuf
  • 77
  • 2
  • 9
2

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.

Kae Verens
  • 4,076
  • 3
  • 21
  • 41
  • Or ```overflow: hidden``` and negative margins. – Brigand Dec 09 '11 at 11:21
  • @kae - I can't use images in background because in my current case images are part of content not for decoration. so i think wrapping `img` in another element is the trick for now. though i will have to add an unnecessary tag to just to make styling proper – Jitendra Vyas Dec 09 '11 at 11:23
0

for img tags , percent border radius work perfectly:

.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>
mina morsali
  • 778
  • 1
  • 16
  • 29
0

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.

Maher
  • 2,517
  • 1
  • 19
  • 32
Robin J
  • 25
  • 8
0

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.

Dennis Jamin
  • 398
  • 1
  • 10
0

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.

Christopher Marshall
  • 10,678
  • 10
  • 55
  • 94