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.

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">
$(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.

sample usages

Credits

Thanks to Darcy Clarke for the jQuery code.

215 Comments

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!

Dave
Jun 30, 2010 at 7:44 am

Sweet!

slaws
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!

Joffrey
Jun 30, 2010 at 8:32 am

Well done!
This problem gave me headaches with Firefox.

Jason
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?

Chris
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!

peeper
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.

kumar
Jun 30, 2010 at 8:56 am

IE has plans to support CSS3 sometime in 2014.

Rilwis
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

Beben
Jun 30, 2010 at 9:30 am

so smooth on Mozilla FF 3.6

Hannes
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

Steve
Jun 30, 2010 at 10:16 am

Have you considered adding ie-css3.htc to this package to get IE to work with it too?

Toby
Jun 30, 2010 at 10:29 am

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

Chad
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.

Rolf
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.

Abraam
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.

:(

Zac
Jun 30, 2010 at 8:59 pm

Did you try this?

-moz-border-radius: 5px;

iifksp
Jun 30, 2010 at 9:13 pm

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

Rembrand
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!

Mike
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.

atxatx
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.

Claire
Jul 1, 2010 at 5:52 am

This is very nice, but what about IE6?

Marlou
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.

Multyshades
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
http://nazmulweb.com/site5/demo/rc/

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.

George
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?

Thanks!
George

Ricardo
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?

Ian
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)

dsy
Jul 2, 2010 at 12:26 am

That’s really useful ! nice and easy !

AboutWout
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).

Greetz,
Wouter

Kromack
Jul 2, 2010 at 5:17 pm

Very nice script !

Jenna
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.

E.g: http://jsfiddle.net/JJenZz/3gYqj/

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

aki
Jul 4, 2010 at 3:03 am

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

farhad
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 http://www.cs.iupui.edu/~ar43/a455/zenGardenFinal/ – 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 http://www.cs.iupui.edu/~ar43/a455/zenGardenFinal/

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.

Cheers,
Keith

yohan
Jul 7, 2010 at 2:46 am

jQuery is cool :)

Lindha
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.

Singlebits
Jul 7, 2010 at 2:32 pm

Great solution, thanks as always.

fajar
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.

ridwan
Jul 8, 2010 at 9:21 am

i already try that, and the result are nice

K
Jul 8, 2010 at 2:22 pm

and for IE ?

Mikael
Jul 8, 2010 at 3:42 pm

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

hagi
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

cheers

Sivaranjan
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.

khay
Jul 10, 2010 at 10:28 pm

nice trick.. cool..

wildanr
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.

http://www.devseo.co.uk/examples/beautiful-css3-form/

fajar
Jul 13, 2010 at 9:41 pm

good job..

ilham
Jul 14, 2010 at 4:25 am

i will try it, thanks :D

shiva
Jul 14, 2010 at 9:37 am

Good Tutorial, very useful

Mantanera
Jul 14, 2010 at 11:21 am

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

mediadinger
Jul 15, 2010 at 5:19 am

Thnx a lot … very helpfull !

doris
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.

Andre
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?

Kojeje
Jul 16, 2010 at 12:11 am

Thanks so much for the code you gave us :)

khay
Jul 16, 2010 at 1:27 pm

nice post. thanks for info

wij
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

dety
Jul 18, 2010 at 10:38 pm

i love design. thanks for sharing

Momo
Jul 19, 2010 at 12:19 am

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

Arief
Jul 19, 2010 at 1:51 am

Thanks…
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!

rifky
Jul 19, 2010 at 10:40 pm

thanx…i’ll try..

rifky
Jul 19, 2010 at 10:40 pm

thanx..i’ll try…

tedted
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

Steve
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!

Roy
Jul 21, 2010 at 5:49 am

thanks for the tips, i tink IE is difficult browser

sam
Jul 27, 2010 at 6:12 am

your code don’t work on internet explorer 8

Melfina
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.

ChrisC
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.

likecss
Jul 29, 2010 at 9:34 pm

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

jimmy
Jul 30, 2010 at 1:25 am

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

aviva
Jul 30, 2010 at 2:16 am

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

Slobodan
Jul 31, 2010 at 9:33 pm

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

Matt
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:

CSS:
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!

Solo
Aug 4, 2010 at 12:32 am

Yeah,so cute!

Gatz
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

http://www.freelanceportal.8rf.org

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.

http://www.freelanceportal.vze.com

wptidbits
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.

sher
Aug 10, 2010 at 12:28 am

you thanks cici

rose
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

neo
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

Mo7mD.ZaYOnA
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.

Adriana
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..

neo
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?

skqi
Aug 23, 2010 at 11:19 pm

cool stuff. Thanks

CSSHunt
Aug 27, 2010 at 1:20 am

Nice work i really like it lovely!

CSSHunt
Aug 27, 2010 at 1:20 am

really nice work!

lisa
Aug 28, 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

Jeremiah
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!

Rick

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

very nice!

YoonMi
Sep 8, 2010 at 7:46 am

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

lisa
Sep 13, 2010 at 9:53 pm

th company is really very good, http://www.hammer-crushers.com, the product of it is very welllisa81237@126.com, MSN;lisa.8704@live.cn

ospop
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.

Thiago
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.

shoea
Oct 7, 2010 at 9:50 pm

I have recently started using the blogengine.net 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

Melvins
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

Waqar
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 :)

thanks

Martin Bay
Nov 14, 2010 at 10:56 am

Very useful little tutorial.

Grovulent
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.

Julie
Nov 20, 2010 at 6:30 pm

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

mytravelpot
Nov 26, 2010 at 3:19 am

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

Mr.willsons
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,

Zsolti
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:

http://www.webdesignerwall.com/demo/jquery-css3-rounded-img/

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.

mikeson
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

nazir
Dec 4, 2010 at 1:30 am

Its not working in IE

daconde
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

jozsmith
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.

mikwillson
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

silviu
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)

ilkomerz
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

Ben
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- csssplash.com

Ralph
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!

Nicholas
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. :[

bggfbf
Dec 15, 2011 at 7:24 pm

gfbgfbgfb
gfb
gf
bgfb

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.

sumomax
Mar 21, 2011 at 5:40 pm

is not easy to put on weight

Daas
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..

Rachel
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!

Gena
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?

Joerg
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.

ainzon
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.

Thanks.

dexx
Apr 17, 2011 at 3:03 pm

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

Shawn
May 15, 2011 at 12:38 am

How would this be implemented into wordpress?

Chap
May 18, 2011 at 5:23 am

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

Salaam
Jun 22, 2011 at 4:04 am

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

.round
{

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
width: 96px;
height: 96px;
overflow:hidden;
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.
thanks.

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

:) it works on chrome! thank you!

orhanbt
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!

Jitendra
Aug 8, 2011 at 2:35 am

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

complex41
Aug 23, 2011 at 11:18 am

And then he handed you the thirty-five 45

mei1i
Sep 10, 2011 at 4:33 pm

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

Durga
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.

Durga
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 :)

Alfonso
Sep 16, 2011 at 2:43 am

Don’t run OK in IE 8. Sorry

Mamouneyya
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!

texxs
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.

YerMaw
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.

rachaelov
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.

gilgalo
Sep 22, 2011 at 10:30 am

esoy probando el alojamiento de

Mamouneyya
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 (http://css3pie.com/) 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 (http://www.iamperfectlyaverage.com/blog) 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.

jimmy
Dec 13, 2011 at 6:15 pm

Hi,

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

Jimmy

Peter W
Dec 30, 2011 at 9:16 pm

Tricky! Thanks!

Angela
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.

Miguel
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;

doug
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.

doug
Jun 7, 2012 at 10:20 am

oh, forgot to mention that ie only works with cssPie http://css3pie.com/documentation/getting-started/

Anthony
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. :)
Thanks.

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:

$(document).ready(function(){

$(“.rounded-img”).load(function() {
$(this).before(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!

testtoabc
May 22, 2012 at 11:05 pm

I am trying to do something on round border with css property which link http://www.webinbangla.com/2012/05/css-round-shape/

HackBert
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.

Thanks

dix1975
Sep 18, 2012 at 12:07 pm

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

Afzal
May 28, 2013 at 1:13 pm

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

Afzal
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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.