CODEWITHSUNDEEP
csscross-browser
Jitendra Vyas
Jitendra Vyas

Reputation: 152667

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}

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?

Upvotes: 7

Views: 31031

Answers (7)

Robin J
Robin J

Reputation: 25

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.

Upvotes: 0

mina morsali
mina morsali

Reputation: 778

for img tags , percent border radius work perfectly:

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

Upvotes: 0

Christopher Marshall
Christopher Marshall

Reputation: 10736

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.

Upvotes: 0

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 10

Yusuf
Yusuf

Reputation: 177

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

Upvotes: 3

Dennis Jamin
Dennis Jamin

Reputation: 386

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.

Upvotes: 0

Kae Verens
Kae Verens

Reputation: 4079

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.

Upvotes: 2

Related Questions