Using CSS3 to make rounded corner images

In this tutorial, we’ll use css3 to make a rounded corner for images. As described, css3 supports for IE9+, Chrome, FireFox, Safari and other browsers. You can check your browser support here.

Another problem is that border-radius property doesn’t work properly with images. It only works with div, span and other Html elements. Try this code:


<style type="text/css"> 
img{ 
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px;
    border-radius: 30px;
}
</style>

We observe that by giving the border-radius property to the <img> tag the borders get rounded, but the image does not. The image flows out of the border.
rounded-corner-problem
To solve the above problem,

  1. Wrap the <img> element with a div tag which should be having the same dimensions (height and weight) as the <img> tag.
  2. To this wrapping div tag, specify the same original image as the background image.
  3. To the original image <img> tag, give the property “opacity: 0“.

Simply add the following html markup:


<div>
    <img src="images/test.jpg" alt="testing" />
</div>

and css:

<style type="text/css">
div{
    width: 550px;                                          /* Width same as the image width */
    height: 350px;                                         /* Height same as image height */ 
    background: url("images/test.jpg") no-repeat 0 0;      /* Background Image same as the Original image being wrapped by the div tag */
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px;
}

img{
    opacity: 0;                                            /* Hide the original image being wrapped by the div tag */
}
</style>

Refresh your page and check it out.