Webdesignerwall has writen tutorial how to use the CSS3 border-radius and box-shadow feature to make rounded image. The problem is none of the modern browsers display rounded corners imagelike they want. Webkit does display the rounded corners, but the inset box shadow is not supported. In Firefox, the border-radius doesn’t even display at all.

The trick is very simple: wrap a span tag around the image element. Specify the original image as background-image. To hide the original image, specify opacity:0 or display:none. To make things easier, we can use jQuery to automatically wrap a span tag around the image. The jQuery code will find any element with “.rounded-img” or “rounded-img2″ and wrap it with a span tag. The script finds the src, width, height, and CSS class attribute of the original image and apply them as inline styling in the span tag. Then it specifies the opacity of the image to 0 to hide it. The result is perfect rounded image with box hadow.

Requirements: jQuery Framework
Demo: http://www.webdesignerwall.com/demo/jquery-css3-rounded-img/
License: MIT License

Incoming search terms for the article:

• jquery image round
• jquery image rounded
• jquery css3 rounded corners image
• css3 rounded image with jquery
• css3 rounded image
• jquery tag curved
• rounded image with jquery
• rounded img jquery
• jquery curve corner
• very simple css3 layout