Jun 30

CSS3 Rounded Image With jQuery

The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically.

View Demo Rounded Images

Goal

My goal to use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot below.

sample image

Problem

The problem is none of the modern browsers display rounded corners image the way I want it. 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 CSS Trick

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. I find using the opacity method is a better approach because the image will remain available for copy or download.

Final Solution With jQuery

To make things easier, we can use jQuery to automatically wrap a span tag around the image.

The jQuery code below will find any element with ".rounded-img" or "rounded-img2" (in my case, it is the image element) 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.

It works with any image dimension (with or without the width and height attribute). It can also be combined with other CSS classes. No additional markup is required.

jquery wrap

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>

Sample Usage

I hope you will find this trick useful. For example, you can use it to style your blog’s avatar or profile photos.

Credits

Thanks to Darcy Clarke for the jQuery code.

Delicious Stumbleupon Digg

ScrollTo Posts With jQuery What Do You Think About Flash Now? Comment and Win

Comments

Pages: 13 12 11 10 9 8 7 6 5 4 3 … 1 » Show All

There are 125 comments (+Add)

125 Rick LaPoint http://internetmarketing.ricklapoint.com/
September 1st, 2010 at 3:52 pm

I’m pretty new to WordPress, and for the last few weeks have been trying to “reverse-engineer” on my own, many of the things I have seen in my travels, and also now see here on your site. I’m not quite sure how I ended up here (too much link hopping…) but your shadow corners method is something I’ve been looking for. Thanks!

Rick
124 Jeremiah http://www.selengiadesigns.com
August 31st, 2010 at 2:41 am

great post!! I really love the look of rounded images. It just seems a lot cleaner.
123 lisa http://www.hammer-crushers.com
August 28th, 2010 at 8:48 pm

yes, well, if you want to buy crusher, pls visit the webpage:www.hammer-crushers.com, feel free to contact us:lisa81237@126.com
122 CSSHunt http://www.csshunt.com/
August 27th, 2010 at 1:20 am

really nice work!
121 CSSHunt http://www.csshunt.com/
August 27th, 2010 at 1:20 am

Nice work i really like it lovely!
120 skqi http://www.xininvoice.com
August 23rd, 2010 at 11:19 pm

cool stuff. Thanks
119 neo http://desyna.com
August 20th, 2010 at 11:23 am

hmmm, I’m a little confused by the .load method

I’m trying to style images off a feed and I’ve found that if the css executes before the js has time to build the elements (ie on initial load) it doesn’t work. If I refresh…voila. If I navigate to another page and return using the back button, it breaks.

I changed .load to .wrap thanks to @Andre and it works. But why?
118 Deko Web http://www.dekowebtasarim.com
August 18th, 2010 at 10:28 pm

really nice thank you..
117 Adriana
August 18th, 2010 at 8:38 am

do’ no’ why but this website is absolutely pleasing to the eye
116 parind shah
August 17th, 2010 at 5:20 am

Nice, but sorry with IE its not working.

Pages: 13 12 11 10 9 8 7 6 5 4 3 … 1 » Show All

CSS3 Rounded Image With jQuery