How to make rounded corner images using CSS3

How make rounded corner images using CSS3

Rounded corners in Website design has been a trend for a long time. Almost every project involves some or the other kind of rounded corner boxes. Designers and developers have used different techniques for developing rounded corner boxes. Many of these techniques involve css, javascript, jQuery plugins, and images.

Now looking at the extensive use of the rounded corners in Web Design, W3C has also come up with a new property in CSS3, which will make the rounded corners much easier to use and implement. This property is the “border-radius” property. Almost all the major browsers (except Internet Explorer) have started using this property, with their vendor specific prefixes (-moz-border-radius, and -webkit-border-radius). This property is very easy to use; And using this property will give a rounded corner to almost any element in the html document.

Problem: “border-radius” property doesnot work on images

With the use of “border-radius” property, the rounded corners are easily achievable on div tags, spans, and other html elements. Now, the problem is when you use the border-radius with an img element, the border of the image gets rounded, and the image is drawn above the border, so it is not rounded (look at the example below).

To the image displayed above (img tag), we have given the following styles:

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

Here we observe one thing 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.

Solution: The tricky part!!!

To solve this above discussed issue, we should do the following steps:

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“.

Now, after following the steps as mentioned above, we have the following html markup:

<div>                                             /* DIV TAG STARTS HERE WITH SAME DIMENSIONS AS IMAGE */
    <img src="images/test.jpg" alt="testing" />   /* IMAGE TAG */
</div>                                            /* END DIV TAG */

Now, we are going to give the following styles to the img and div tag.

<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>

The Final Result

After giving the above mentioned markup, and the styles, we will achieve that looks something like this:

The rounded corners shown in the examples above will not appear in Internet explorer. The “border-radius” property is not supported by Internet Explorer as of now.