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


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

sample image


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.

rendering problems

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.

rendering problems

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

  $(".rounded-img, .rounded-img2").load(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;" />';


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.

sample usages


Thanks to Darcy Clarke for the jQuery code.


Eric D. Greene
Jun 30, 2010 at 7:40 am

Fantastic – great tip thanks

Unique Design
Jun 30, 2010 at 7:40 am

Absolutely useful!
Thanks Nick! As always you’ve gifted us with a great tip!

Jun 30, 2010 at 7:44 am


Jun 30, 2010 at 7:49 am

Don’t work corectly with inset box-shadow on Chrome (Windows)

Milos Milikic
Jun 30, 2010 at 7:50 am

Great! Thanks for sharing!

Jun 30, 2010 at 8:32 am

Well done!
This problem gave me headaches with Firefox.

Jun 30, 2010 at 8:45 am

I’ve had a need for something like this before and remember having to use similar techniques to get it to work before, however this makes it much easier. This might work well with a conditional to keep it from applying the shadow to Chrome on Windows, as that’s my only real concern with the technique – not having the shadow is fine, but the shadow making it look like the image is sitting on a grey box bothers me – frankly in Chrome/Win I’d almost rather see just a square image if there is a square shadow behind it anyway.

I do love the technique though, and hopefully Chrome will have better support for something like this in the future – by the way, has anyone checked this out in an IE9 preview to see if it will be supported there?

Jun 30, 2010 at 8:49 am

Thank you so much for this! This is great, but wouldn’t it be so great if IE would catch up with the times? I know that IE9 is supposed to be like awesome, but I will believe it when I see it, and you still have to be backwards compatible, although I have recently become a big fan of saying you know what…I am going to give those people a little aesthetic treat if they use FF or a webkit browser! Thanks for this though!

Jun 30, 2010 at 8:50 am

Don’t work the inset box-shadow on Chrome (win)

Nick La
Jun 30, 2010 at 8:54 am

As mentioned in the demo page, inset box-shadow doesn’t display properly on Windows Chrome. It is a bug.

Jun 30, 2010 at 8:56 am

IE has plans to support CSS3 sometime in 2014.

Jun 30, 2010 at 9:21 am

Nice tutorial. The trick is simple but really useful. Thanks for sharing.

Tommie Hansen of Byme
Jun 30, 2010 at 9:23 am

50% of visitors won’t see fancy CSS3-stuff so all these CSS3 things feel quite unnecessary. :f

Jun 30, 2010 at 9:30 am

so smooth on Mozilla FF 3.6

Jun 30, 2010 at 9:55 am

i disagree with Tommie, if you let it degrade it nice, I find myself using CSS3 more and more in can-do-but-dont-have-to Situations

Jun 30, 2010 at 10:16 am

Have you considered adding to this package to get IE to work with it too?

Jun 30, 2010 at 10:29 am

Wonderful! Love the inset one. Ran into this problem a while ago, nice solution! :)

Jun 30, 2010 at 11:57 am

Awesome effect! I’ve been using similar methods to fix those rounded corners when using the CSS3 rounded corners.

Jun 30, 2010 at 5:14 pm

Very nice Article, thanks for sharing it :-)

Calvin Tennant
Jun 30, 2010 at 7:42 pm

I really like this.

Jun 30, 2010 at 8:00 pm

Very cool! Thanks for sharing.

Paul Irish
Jun 30, 2010 at 8:37 pm

Using jQuery to accomplish something that…. umm.. trivial in CSS and HTML seems like a poor idea.

Just looking at the before code (the html) and the after (the jQuery) is revealing enough. You’re now using 3x as much code, and you’re going to give all your users a flash of unstyled text.


Jun 30, 2010 at 8:59 pm

Did you try this?

-moz-border-radius: 5px;

Jun 30, 2010 at 9:13 pm

I really like this, but it’s a pity that win chrome can not correctly display this.

Jul 1, 2010 at 2:51 am

A very nice sollution. I was looking for something like this last week but I opted for masking the corners with png’s instead. Will try this one out next time though!

Jul 1, 2010 at 3:27 am

very useful article. I haven’t thought about making a corner for the image will need to go a way like you said. I thought it will be the same with the border.

Jul 1, 2010 at 4:53 am

Too bad it’s not cross browser… Not working in any ie…

Web Designer Evan Skuthorpe
Jul 1, 2010 at 5:35 am

awesome trick! nice work.

Jul 1, 2010 at 5:52 am

This is very nice, but what about IE6?

Jul 1, 2010 at 6:11 am

The CSS version works for me in the latest (stable) release of Firefox, aswell as the IE9 Testdrive tool. The jQuery example doesnt work at all in the IE9 Preview tool, and does not have rounded corners in Firefox. I’m viewing on Windows 7 64.

Jul 1, 2010 at 7:12 am

its really useful article, thanks share this nice & informative stuff

Tutorial Lounge
Jul 1, 2010 at 8:20 am

really helping techniques you sharing in this article. thanks

Ayesha Lomaski
Jul 1, 2010 at 9:26 am

Hi! I’m having a problem when the span tag wraps the img the img goes small (like 1 text line height) why is that happening?

Ayesha Lomaski
Jul 1, 2010 at 10:05 am

discovered: add a “display:block;” at the span style and it works ;D

Hoque Md.Nazmul
Jul 1, 2010 at 10:29 am

Instead of sharp corner, rounded corner appeals more. I have ported the code to work in prototypejs
document.observe(“dom:loaded”, function() {
$$(“.rounded-img”).each(function(tgt) {
if (Prototype.Browser.IE) {
tgt.src = “roundhandler.ashx?f=” + tgt.src + “&c=888”;
} else {
tgt.setOpacity(0).wrap(new Element(‘span’).addClassName(tgt.getAttribute(‘class’)).setStyle({
‘width’: tgt.width + ‘px’,
‘height’: tgt.height + ‘px’,
‘background’: ‘url(‘ + tgt.getAttribute(‘src’) + ‘) no-repeat center center’
For IE, I am using a http handler to make the image rounded. If you would like to see it in action, you can go to this location

Thank you so much for sharing such a creative idea.

Alex Kloss
Jul 1, 2010 at 11:01 am

Nice idea, but opacity:0 uses more CPU e.g. most mobile devices than visibility:hidden. Do your mobile users a favour and swap these attributes.

Jul 1, 2010 at 3:18 pm

Very cool & useful idea, but sometimes I have to refresh to get the .js to run (both in my implementation and on your demo page). Anyone know how to fix that?


Jul 1, 2010 at 3:26 pm

Why don’t you have a “share on twitter” ?? this article is pretty cool !

Andy Hunt
Jul 1, 2010 at 3:40 pm

@Claire (#29)– What about IE6? What year do you think this is?

Jul 1, 2010 at 3:41 pm

I’m currently working on a website and was having this problem! Thanks for posting, this saves me a lot of time!

Shikeb Ali
Jul 1, 2010 at 4:01 pm

I think CSS3 need some more time to grow as we clearly know whats the problem is… we are still struggling and crumbling our code because of these browsers.

Anyways… Nice work and keep it coming :)

Comprar online
Jul 1, 2010 at 4:49 pm

Nice Tip!!! Thanks for share!! =0)

Jul 2, 2010 at 12:26 am

That’s really useful ! nice and easy !

Jul 2, 2010 at 5:12 pm

Excuse me if this has been covered in one of the comments already, but inset box-shadows do work in webkit browsers.

/* Safari & Chrome */
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .5);

/* Firefox */
-moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .5);

/* Opera and W3C */
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .5);

Like I said… I haven’t read all the comments, but I thought it was worth noting. (all tested on Windows XP).


Jul 2, 2010 at 5:17 pm

Very nice script !

Jul 2, 2010 at 9:06 pm

I was bored so I created a jQuery plugin for this lol… it’s very basic but it executes in about 0.005ms as opposed to your 0.020ms. Every little helps as they say ;)

You just need to include the plugin file and then execute $(yourSelector).roundImg(radius) on DOM ready.


I included the unminified code at that URL too so that you can see how it’s built but you don’t need to save that in your plugin file :)

Marcy Clark
Jul 3, 2010 at 1:10 am

This is cool, thanks.

I hope it works with IE9

Jul 4, 2010 at 3:03 am

Great tuts. Nowadays everything can be settle with a CSS and jQuery

Jul 6, 2010 at 3:48 am

Nice tutorial man.. thanks..

Andrew Roberts
Jul 6, 2010 at 1:19 pm

I actually did this a while back on a project for school – But the inset effect is very cool!

Andrew Roberts
Jul 6, 2010 at 1:22 pm

Oh, I just realized you used jQuery for this? My rounded images are all done with CSS on this page

Web Dizajn Sarajevo
Jul 6, 2010 at 1:45 pm

Wow! Exilent!

Keith | Earn Passive Income At Home
Jul 6, 2010 at 4:33 pm

This is a quality article! I’ve been reading quite a few articles recently on CSS3 rounded corner implementations, and this is one of the best I’ve read. I’ll certainly be using this implementation in my work from now on.

Thanks for the great article.


Jul 7, 2010 at 2:46 am

jQuery is cool :)

Jul 7, 2010 at 8:45 am

Thank you, I have come across this several times lately. My fix have been similar but never with the use of jquery. Its a great idea.

Jul 7, 2010 at 2:32 pm

Great solution, thanks as always.

Jul 7, 2010 at 11:07 pm

it’s cool

PCI Compliant Hosting
Jul 8, 2010 at 12:15 am

yeah it would be such a waste not to show the rounded edges! great!

code pixelz media
Jul 8, 2010 at 5:01 am

wonderful article very helpful indeed.

Jul 8, 2010 at 9:21 am

i already try that, and the result are nice

Jul 8, 2010 at 2:22 pm

and for IE ?

Jul 8, 2010 at 3:42 pm

Great tips! I will be using that example on my next project!

Jul 8, 2010 at 4:44 pm

hey dude

just a proposal… it might be better to hide the IMG tag by visibility:hidden; than opacity… so original space keeps reserved and visibility is much more browser compliant than opacity – even in very old ones.

good article thanks nick


Jul 10, 2010 at 6:05 am

Lovely post, i had been struggling to find something like this for quite a while. Thanks a lot for sharing. I am going to add it to my CSS aggregator site.

Jul 10, 2010 at 10:28 pm

nice trick.. cool..

Jul 11, 2010 at 5:07 pm

It’s work, but i’m a little bit disapointed because the need of css 3 :( Maybe can have more good use latter

Alex Hall
Jul 12, 2010 at 5:35 am

It’s still just a shame about the webkit bug that doesn’t seem to allow the radius to contain an inset shadow. I created a nice form in CSS3 made to mimick an image I saw. It works great, except for that one inset box-shadow, much like your example here.

Jul 13, 2010 at 9:41 pm

good job..

Jul 14, 2010 at 4:25 am

i will try it, thanks :D

Jul 14, 2010 at 9:37 am

Good Tutorial, very useful

Jul 14, 2010 at 11:21 am

Very nice effect! I like rounded corners, I think we’ll implement it very soon :)

Jul 15, 2010 at 5:19 am

Thnx a lot … very helpfull !

Jul 15, 2010 at 7:38 am

nice trick.. cool..

Box Model Junkie
Jul 15, 2010 at 9:11 am

Nice tutorial, CSS3 tips are always very useful.

Jul 15, 2010 at 6:34 pm

Great trick; looking better even in Safari.

Why do you use the .load method / ajax function for this? You could use .wrap right after the img selector, like this:

$(“.rounded-img, .rounded-img2”).wrap(function(){
etc etc

Or is there any reason for using specifically the .load in this way?

Jul 16, 2010 at 12:11 am

Thanks so much for the code you gave us :)

Jul 16, 2010 at 1:27 pm

nice post. thanks for info

Jul 17, 2010 at 5:26 am

Woow, that’s great design !!
thanks for sharing.. it’s helpful

Check Website
Jul 17, 2010 at 3:37 pm

Definitely nice tutorial going to have to bookmark this.

Terry Reilly
Jul 17, 2010 at 5:18 pm

Thanks, for a great post. I have learned so much from this (and your site) about CSS.
Thanks Again

Jul 18, 2010 at 10:38 pm

i love design. thanks for sharing

Jul 19, 2010 at 12:19 am

woow, it’s a great design…
very nice..

Jul 19, 2010 at 1:51 am

Jquery is the best. I like it

code pixelz media
Jul 19, 2010 at 5:05 am

wonderful article very helpfull inded

Web design portfolio
Jul 19, 2010 at 12:09 pm

awesome tip! still learning CSS3 so these tutorials help!

Jul 19, 2010 at 10:40 pm

thanx…i’ll try..

Jul 19, 2010 at 10:40 pm

thanx..i’ll try…

Jul 20, 2010 at 2:04 am

thanks for your tips

Web Design LA
Jul 20, 2010 at 4:50 am

Great idea. I implemented it and it really works and shows great look. Thanks

Jul 20, 2010 at 10:41 am

Thanks for the tips !

Business Catalyst Dev
Jul 20, 2010 at 3:01 pm

Thanks again! great design tips!

Jul 21, 2010 at 5:49 am

thanks for the tips, i tink IE is difficult browser

Jul 27, 2010 at 6:12 am

your code don’t work on internet explorer 8

Jul 28, 2010 at 7:26 pm

Thank you for the trick. It looks really good, I’m looking forward to trying this.

Ian Milne
Jul 28, 2010 at 10:33 pm

Thanks for the tutorial. It works great, even for me. Great site.

Jul 29, 2010 at 5:08 am

Thats really good that, although if it converts an image thats within a display:none div then the size comes back as 0x0, therefore not displaying properly.

Outside of that it works really well.

Jul 29, 2010 at 9:34 pm

Thank you for the trick. It looks really good, I’m looking forward to trying this.

Jul 30, 2010 at 1:25 am

dude this is what i have been looking for . thanks man great work.

Jul 30, 2010 at 2:16 am

woow, it’s a great design……i’ll try…

Jul 31, 2010 at 9:33 pm

Nice, too bad it doesn’t work in ie.

Aug 2, 2010 at 8:04 pm

IE is not worth the hassle! If people want a better experience on the web, then they will have to download better web browsers.

Benjamin Charity
Aug 3, 2010 at 1:08 am

An interesting hack for creating the inset shadow that I’m using for the first time…

If the image is inside a containing element, use the :after pseudo class and create an empty element with an inset shadow without adding to your html markup:

box-shadow: inset 0 0 10px rgb(0,0,0);
-webkit-box-shadow: inset 0 0 10px rgb(0,0,0); /* Safari, Chrome */
-moz-box-shadow: inset 0 0 10px rgb(0,0,0); /* Firefox */
-o-box-shadow: inset 0 0 10px rgb(0,0,0); /* Opera */
content: “”;
display: block;
height: 80px;
position: absolute;
left: 3px;
top: 0;
width: 80px;
z-index: 1;

Make this element the same size as your image and position it directly on top. Granted it is still a hack, but a touch of CSS added is better than a script!

Great post as always!

Aug 4, 2010 at 12:32 am

Yeah,so cute!

Aug 4, 2010 at 11:18 am

don’t work with iexplorer so I find it useless

Luke S
Aug 5, 2010 at 10:57 am

Great tutorial and website! Keep up the good work.

Freelance Portal
Aug 8, 2010 at 10:40 am

Work From home: Homebased website design jobs, web developers,graphic animation, SEO, CMS templates, blogger themes, article writers, Joomla, wordpress, API programmers, ASP, XML, PHP programming projects. XXX video blogging, ebay sellers and online IT support.

Cheatsheets and online tutorial.

Aug 9, 2010 at 12:10 pm

Another excellent tutorial. I know this is possible to do but you started it Nick. Really awesome. Unfortunately, still the same thing happen, when will IE starts to support this great function? We don’t know that. Cross browser test not really performs well in IE. Thanks for the trick anyway. Nice to implement in my next blog.

Aug 10, 2010 at 12:28 am

you thanks cici

Aug 10, 2010 at 6:51 am

very nice

Steam Multimedia - Web Design
Aug 10, 2010 at 8:56 am

Nice tutorial.

The biggest problem is that each browser runs on different rules. i noticed that you didnt bother talking about IE 6,7 or 8.
I think everyone knows how bad they are for web standards.

logo design
Aug 11, 2010 at 8:04 am

great nice work

Ahmad Alfy
Aug 12, 2010 at 5:33 am

I didn’t give my images a class and selected it with regular CSS selector :
.element img { }
It didn’t work … I tried over and over till I figured I have to give the image a class to make it work.

Thanks a lot for this handy plugin

Aug 12, 2010 at 4:36 pm

Nick, Darcy – thanks!

You guys make things look so easy and so pretty!
Truly appreciate the share.

jaw crusher
Aug 13, 2010 at 8:56 pm

very nice

Aug 15, 2010 at 12:54 am

very nice

parind shah
Aug 17, 2010 at 5:20 am

Nice, but sorry with IE its not working.

Aug 18, 2010 at 8:38 am

do’ no’ why but this website is absolutely pleasing to the eye :)

Deko Web
Aug 18, 2010 at 10:28 pm

really nice thank you..

Aug 20, 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?

Aug 23, 2010 at 11:19 pm

cool stuff. Thanks

Aug 27, 2010 at 1:20 am

Nice work i really like it lovely!

Aug 27, 2010 at 1:20 am

really nice work!

Aug 28, 2010 at 8:48 pm

yes, well, if you want to buy crusher, pls visit the, feel free to contact us:[email protected]

Aug 31, 2010 at 2:41 am

great post!! I really love the look of rounded images. It just seems a lot cleaner.

Rick LaPoint
Sep 1, 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!


cheap balmain jacket
Sep 4, 2010 at 2:46 am

very nice!

Sep 8, 2010 at 7:46 am

Great post – def going to use this one!!!

Sep 13, 2010 at 9:53 pm

th company is really very good,, the product of it is very [email protected], MSN;[email protected]

Sep 21, 2010 at 11:59 pm

woow, it’s a great design

ospop shoes shop
Sep 24, 2010 at 1:46 am

Great info. The provided demo is very useful.

Tiago Felipe Ronchi
Sep 27, 2010 at 8:53 am

Gente, do que adianta se não funciona nos IE’s.
Vamos ser mais pé no chão.

Oct 4, 2010 at 7:07 pm

it is worrying that po may be very heavy if you have many images, the idea is to use css border with rounded corners and for sure in the near future will be able to mask css ……. vlws

Billy Girlardo
Oct 5, 2010 at 7:28 pm

IE9 looks good too – go figure lol.

Oct 7, 2010 at 9:50 pm

I have recently started using the and I having some problems here? in your blog you stated that we need to enable write permissions on the App_Data folder…unfortunately I don’t understand how to enable it.

Rob Hiffy
Oct 13, 2010 at 11:13 am

i find jquery so hard. thanks for this! invaluable

Oct 20, 2010 at 1:46 am

Thanks to Darcy Clarke for generate jQuery code. From all types of shapes I like rounded shape the most because It looks like amazing and preety good design.

Los Angeles Web Design

Nov 4, 2010 at 4:05 pm

Even in firefox, I can see that it displays correctly..

Artur Ejsmont
Nov 7, 2010 at 3:28 pm

great post and design :)


Martin Bay
Nov 14, 2010 at 10:56 am

Very useful little tutorial.

Nov 16, 2010 at 7:18 am

I just wanted to echo the comments of Neo and Andre – if you are noticing that your images aren’t displaying when the browser has cached them, the solution is as they describe – change the load function to wrap.

Nov 20, 2010 at 6:30 pm

Doesn’t work in my IE8…stupid IE. Works in firefox though!

Nov 26, 2010 at 3:19 am

I like rounded shape the most because It looks like amazing and preety good design.

Nov 30, 2010 at 11:05 pm

When you do article marketing, your intention is to increase the number of visitors to your website. It is not our abilities that show what we truly are, it is our choices. I have look for such a article for a long time,

Dec 1, 2010 at 2:23 pm

I experienced a little bug with this method, on the sample. I am using Firefox 3.6.12, I looked at the sample at this link:

Then clicked back, back again to this article, at the end I clicked the sample link again for a closer look and then the image was not rounded, it overflown the border. After refreshing with CTRL+F5 it was working again. Just thought you might be interested. :)

Good stuff though, very good.

Dec 3, 2010 at 9:52 pm

When you do article marketing, your intention is to increase the number of visitors to your website.ugg classic boots

Dec 4, 2010 at 1:30 am

Its not working in IE

Dec 8, 2010 at 1:18 am

It relies heavily on touch because the pages I have a user acting on, are usually a collection of child records. uggs outlet Caching is a big help in this respect.Thanks

Dec 13, 2010 at 1:43 am

These are awesome, and as noted before, each seem to have a distinct personality/character about them.

Thanks @darkmotion!

Henry Peise
Dec 24, 2010 at 3:32 am

As you can see the iPhone 3G has a problem getting a sharp focus on objects that are close to the lens. The photo is blurry and very grainy compare with white iphone 4

Designing Mall
Dec 25, 2010 at 2:07 am

This post is a solution of a very practical problem. way of expression is also impressive

Juno Mindoes
Dec 25, 2010 at 2:34 am

If you want to follow the fashion trend, you can never miss the hottest White iphone 4 Conversion Kit. With smooth and liquidity design, we sure White iphone 4 Conversion Kit is what you want.

Dec 27, 2010 at 4:02 am

That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results!cheap ugg boots

Dec 28, 2010 at 2:00 pm

but how-come? i think you could’f done it just with CSS
??? have you tried: “overflow: hidden” (for the borders)

Dec 28, 2010 at 10:20 pm

nice solution,, thanks for share..

Uçak Bileti
Jan 11, 2011 at 11:28 pm

Thanks for good article kimsesiz

Jan 15, 2011 at 3:02 am

Thanks for sharing. Lol

css splash
Feb 8, 2011 at 5:00 am

nice to see this

css splash
Feb 8, 2011 at 5:01 am

nice to see this-

Feb 13, 2011 at 6:12 am

Thank you for your solution.

Christina Smith
Feb 13, 2011 at 10:12 am

Where in my wordpress files should I place something like this? The style.css? Index.php?

Mike Caputo
Mar 8, 2011 at 7:51 am

This is great, what an awesome effect!

Mar 8, 2011 at 8:51 am

This is really great–thanks for sharing! Though, I must say it’s really frustrating that we have to find tricks just so a cool effect is useable in multiple browsers in (almost) the same way. :[

Dec 15, 2011 at 7:24 pm


bob marteal
Mar 9, 2011 at 10:33 am

Great trick, Nick. Good use of jQuery as an enhancement. Might clarify things a little to mention the additional css on the class that is not included inline.

Mar 21, 2011 at 5:40 pm

is not easy to put on weight

Apr 6, 2011 at 2:41 am

Good idea
i will catch soon

uçak bileti
Apr 6, 2011 at 1:34 pm

thanks, i will share..

Apr 7, 2011 at 12:18 pm

Great tutorial this is something I’m definitely going to try this out as I am redesigning my blog theme. I looked into this previously but I was worried that round icons would cut peoples heads in half however all of the Gravitar icons on here look great!

Apr 10, 2011 at 9:27 am

Very cool effect :) I have been looking at implementing it on a site I am working on, especially to “neaten” images placed in certain articles, and on screen is looking good :) I found a snag though that I wanted to ask help or advice for… While testing my print stylesheets, I saw the images weren’t being displayed so you can print them (with the browser not printing backgrounds and the image set 0 opacity)…
Is there a way to correct this, possibly some javascript or JQuery that would run when the print option was chosen, to ‘undo’ the effect for the print version, so the images can print correctly?

Apr 14, 2011 at 5:15 am

Just an echo of other comments: if the rounded effect only shows after reload change .load to .wrap in the script.

Apr 15, 2011 at 5:10 am

Hi there,

great work. Just want to know if there is a solution for the print. My print preview doesn´t show the images.


Apr 17, 2011 at 3:03 pm

age of heart attack decreased with each passing day, he said.

May 15, 2011 at 12:38 am

How would this be implemented into wordpress?

May 18, 2011 at 5:23 am

One question, how much browser are actually support this cool feature?

Jun 22, 2011 at 4:04 am

Hi, I’m new to css and here’s something that I can up with..


-moz-border-radius: 15px;
-webkit-border-radius: 15px;
width: 96px;
height: 96px;
border:#000 1px solid;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);

works in firefox, don’t know about other browsers. Hope I have done it right, if not please let me know.

Charmaine M.
Aug 30, 2011 at 11:13 am

:) it works on chrome! thank you!

Jul 15, 2011 at 4:29 pm

This is verry good

Jul 28, 2011 at 2:41 am

CSS3 rounded corners can we increase the width of the design value. I want to get used, and this thought in reading posts!

Aug 8, 2011 at 2:35 am

why this is not working in IE browser !!! Can any one help me out…

Aug 23, 2011 at 11:18 am

And then he handed you the thirty-five 45

Sep 10, 2011 at 4:33 pm

some time i was looki’n for this every where but now i find it here, too late but tnx!

Sep 13, 2011 at 1:25 am

Hi, I love the look of these rounded corners. Thanks for sharing! I seem to be having an issue, however… gaps appear between the image and borders on the right and left of all images (in all browsers). I’m assuming my css is interfering. But I can’t figure out what’s causing the problem. I’d really appreciate if anyone has any suggestions! Cheers.

Sep 13, 2011 at 2:04 am

I found the issue… problem resolved! Some CSS code was adding padding to that a particular div. Thx again :)

Sep 16, 2011 at 2:43 am

Don’t run OK in IE 8. Sorry

Sep 23, 2011 at 10:23 pm

That is because IE8 doesn’t support border-radius at all. It has nothing to do with the JS code.

Do yourself a favor trashing this crap and find a REAL browser. That is the only real solution, if you’re searching for a one!

Sep 15, 2012 at 12:11 am

IT’s not about us, it needs to work right in IE 8 Because so many of our clients website visitors are using it still. Around 40%. So ya, much as I don’t want to, I have to make sure the design works in IE6, 7, 8 and 9.

Oct 26, 2011 at 5:40 am

Not the best of advice, @Mamouneyya and switching browser is not the only solution. You could try CSS3PIE for support in IE8, I think it even goes down to IE6. So the IE users visiting your site will get to see your rounded corners.

Jan 6, 2012 at 8:42 am

Yes, @Mamouneyya, I wish people would stop saying “oh, just abandon ie, its crap” – in the real world, I just can’t tell my clients that, and expect to be paid.

Sonet SEO
Jun 13, 2012 at 2:56 pm

@Rachaelov just put fixing IE as an extra on your estimates. This way you get to see how many clients are really interested in supporting it. You won’t waste time on each project and if the client goes for it you get paid.

Dave Burrows
Sep 5, 2012 at 5:55 pm

There’s nothing wrong with holding onto the past, not until one tries to make others do the same. If you like IE, that’s great, but it’s not, and never has been, part of the wave of the future. The choice is up to the user to stick with a sewing machine that isn’t capable of making a zig-zag stitch, or acquiring one that is. It’s just not reasonable to expect for developers to find fixes for a straight stitch machine, and more and more developers are refusing to. Microsoft certainly has the resources to keep up with technology. That they refuse to is their black eye. I have no intention of allowing that to blacken mine.

Sep 22, 2011 at 10:30 am

esoy probando el alojamiento de

Sep 23, 2011 at 10:28 pm

Thank you very much! While I cannot say it is THE perfect solution, since it won’t work with JS-disabled browsers, it’s still perfect when you cannot modify the HTML layout.

Geert-Jan Brits
Oct 13, 2011 at 5:04 am

Without having tried this: would the above JS + Pie css ( make this work on IE as well?

Brilliant effect!

Erica Redfield
Dec 1, 2011 at 8:39 am

I tried to implement this on my wordpress blog’s theme ( and added the .js file to my /js folder in the theme folder and then added the jQuery code to my header.php file and changed the div class name to match the one I was trying to change: .avatar—the comment avatars, but it did not work. Any idea what I’m doing wrong? Is there some extra step I need to take in order for it to get to work on a WordPress theme? Any help would be greatly appreciated.

Dec 13, 2011 at 6:15 pm


I stumbled across this site and have to thank you alot for bringing this idea to my mind, I have used the “background trick” in the past, but this jquery really makes it easier to add extras in the future and will become a staple part of my designs now.

Many thanks


Peter W
Dec 30, 2011 at 9:16 pm

Tricky! Thanks!

Jan 16, 2012 at 10:45 am

Hi! :)
(sorry for my bad english)
How can I put some text on the right of the images?
I tried with align=left on the image, but the text is always on the back.

Wordpress Fanboy
Jan 21, 2012 at 10:39 pm

It’s amazing looking back at this post and realizing how far advanced this post was in regards to CSS3 and browser support. Now most browsers support rounded corners on elements using the border-radius css attribute.

Feb 7, 2012 at 1:38 pm

Instead of all that

its faster and easier to do it in simple css3 without having to change pictures to background or adding javascripts, the trick is to use overflow: hidden; and works on most browsers have not test it on opera but every other browser works; example

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 5px 0px #ccc,0px 1px 0px rgba(204,204,204,.3) inset;
-webkit-box-shadow: 2px 2px 5px 0px #ccc, 0px 1px 0px rgba(204,204,204,.3) inset;
box-shadow: 2px 2px 5px 0px #ccc,0px 1px 0px rgba(204,204,204,.3) inset;
margin:0px 5px 0px 0px;
overflow: hidden;

Jun 7, 2012 at 10:18 am

I just confirmed, Miguel, your method works on FF11, chrome, ie8 and (via ie tester) ie6,7. So does the jquery, but the css is probly better and wont have a flash of corners while the js loads.

Jun 7, 2012 at 10:20 am

oh, forgot to mention that ie only works with cssPie

Jun 24, 2012 at 2:05 pm

Just wanted to mention that this worked beautifully and is the much simpler solution. Thanks!

Aniket - Freelance Web Designer
Feb 10, 2012 at 11:14 am

Useful trick. Very useful indeed.
I use drupal & this can be achieved by using a module called Imagecache actions.
but this tutorial is helpful in lot of ways. :)

hasta karyolası
Mar 8, 2012 at 10:51 am

thanks, i will share..

Tekerlekli Sandalye
Mar 9, 2012 at 10:50 am

Thnks for share……………………………

Belajar blog
Apr 10, 2012 at 10:44 am

your wellcome

Jason Bailey
Apr 6, 2012 at 4:25 pm

Thanks for this article!
I started with your example, but I didn’t need the shadows. Plus, I also wanted to see if I could do this without creating a background image.

I ended up with a similar technique, but instead of wrapping a span around the image, I am putting the span before the image. The span contains a rounded edge box with a thick border that matches the page background color. Like your example, the span grabs the original images width and height.

At the end of the function (where the opacity setting was) it adds a border class to the image to match the span above (I found it didn’t look right if I didn’t do this). It seems to work in Firefox, Safari, Chrome, and IE9. I’m more of a visual designer and HTML/CSS guy, but hey, it worked for me.

Here’s my tweaked code:


$(“.rounded-img”).load(function() {
return ”;
$(this).css({ border:”3px solid #FFF” });


Jason Bailey
Apr 6, 2012 at 4:40 pm

Crap. The pasted code didn’t past correctly. Sorry about that.

ısı pay ölçer
Apr 10, 2012 at 1:54 pm

thank you for share.. Good Joob!

May 22, 2012 at 11:05 pm

I am trying to do something on round border with css property which link

Jul 6, 2012 at 11:24 am

Great tutorial there, But I want to know how to create something smiler to the images that appears on the commented post, Having people image in the circle box on the comment section.


Sep 18, 2012 at 12:07 pm

thanks for sharing code. i’ve applied it to gallery on my site.. nice one!!

May 28, 2013 at 1:13 pm

Thanks for such a comprehensive post and for sharing such valuable insights .

May 29, 2013 at 10:47 am

I am glad to become a part of this post.Really nice work you did man.

Post Comment or Questions

Your email address will not be published. Required fields are marked *