Nick La was trying to style CSS3 border-radius to image element and he realized that Firefox doesn’t display border-radius on images. 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. He find using the opacity method is a better approach because the image will remain available for copy or download.

To make things easier, we can use jQuery to automatically wrap a span tag around the image, Darcy Clarke has written a piece of  jQuery code which does the magic tag wrapping automatically. You can view the tutorial on CSS3 Rounded Image With jQuery.

Published under: Information

blog comments powered by Disqus