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: