Rounded corners are hot. They have been for a long time and still are. Recently things got a whole lot easier due to the fact that lots of browsers started supporting (their vendor specific prefixed version of) border-radius. One of the problems with it is that border-radius cannot be used on images. Tim Van Damme recently went over the possibilities to using rounded corners with images and developed a nice CSS solution for it. Javascript geek as I am, I took the liberty of making a tad bit more dynamic by creating a javascript enhanced version of his solution.
Did this help you out? Like what you see?
Consider donating.
Consider donating.
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!
This is probably how Tim’s technique would be applied on larger websites with a lot of pictures. The downside of this approach (other than the fact it relies on jQuery) is that it causes FOUC.
Btw (for the sake of nit-picking): your script relies on jQuery, not just JavaScript. JavaScript !== jQuery.
No FOUC is present as the images already are in place. The only thing that changes when the DOM is loaded is that the borders then become rounded.
About the jQuery part: from the moment I enhance a site with Javascript, I rely on jQuery. Writing Javascript without a library is unimaginable (and a huge PITA) nowadays.
How is that not a FOUC?
When I think FOUC, I think links that are 11px, times not so new roman, #00F which then, on onload, magically change into <whatever you can imagine by applying some CSS>
But yes, technically speaking this is a FOUC, although I don’t experience this as one. The addition of the rounded corners merely is an enhancement: no layout jumps happen, no unstyled text appears, etc. – the built up layout doesn’t shift/blink/whatever when the rounded corners are added.
I agree with you, Bramus, about FOUC.
And this is a great tweak of Tim’s technique.
The only thing I have found is that if the image in question has a margin on it, then that margin won’t display when its opacity is set to 0. The obvious fix is to add the margin to an appropriate rounded selector as well. For example, I had:
#people img {margin-bottom: 5px;}
When my margin disappeared I got it back with:
#people img,
#people .rounded {margin-bottom: 5px;}
Great work, thanks.