Fantastic – great tip thanks

Sweet!

Great! Thanks for sharing!

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?

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

IE has plans to support CSS3 sometime in 2014.

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

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

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

Very nice Article, thanks for sharing it :-)

Very cool! Thanks for sharing.

Did you try this?

-moz-border-radius: 5px;

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!

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

This is very nice, but what about IE6?

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

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?

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.

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

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

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

That’s really useful ! nice and easy !

Very nice script !

This is cool, thanks.

I hope it works with IE9

Nice tutorial man.. thanks..

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/

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

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.

it’s cool

wonderful article very helpful indeed.

and for IE ?

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

nice trick.. cool..

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/

i will try it, thanks :D

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

nice trick.. cool..

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?

nice post. thanks for info

Definitely nice tutorial going to have to bookmark this.

i love design. thanks for sharing

Thanks…
Jquery is the best. I like it

awesome tip! still learning CSS3 so these tutorials help!

thanx..i’ll try…

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

Thanks again! great design tips!

your code don’t work on internet explorer 8

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

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

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

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

Yeah,so cute！

Great tutorial and website! Keep up the good work.

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.

very nice

great nice work

Nick, Darcy – thanks!

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

very nice

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

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?

Nice work i really like it lovely!

yes, well, if you want to buy crusher, pls visit the webpage:www.hammer-crushers.com, feel free to contact us:[email protected]

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

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

woow, it’s a great design

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

IE9 looks good too – go figure lol.

i find jquery so hard. thanks for this! invaluable

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

Very useful little tutorial.

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

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,

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

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

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

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.

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

Thanks for good article kimsesiz

nice to see this

Thank you for your solution.

This is great, what an awesome effect!

This is verry good

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

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

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

esoy probando el alojamiento de

Without having tried this: would the above JS + Pie css (http://css3pie.com/) make this work on IE as well?

Brilliant effect!

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

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.

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” });
});

});

thank you for share.. Good Joob!

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

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