Comments on: Adding Rounded Corners to Images Using CSS

By: web design augsburg

web design augsburg — Mon, 18 Aug 2008 20:23:24 +0000

thanks for code

By: Müfit Kiper

Müfit Kiper — Thu, 29 May 2008 08:31:59 +0000

Hi Dave!

Thank you for this great tutorial. It came in really handy.
@Kelly, I tried it with png-files as well and I suspect that the problem is with IE:s filter. If you use the alpha filter IE6 seems to ignore the CSS for that element.
You probably need to use the IE filters for the positioning as well…

By: Kelly

Kelly — Wed, 26 Mar 2008 15:48:05 +0000

I wanted to let you know that your code doesn’t work with using a fixed transparent png in ie7 or ie6. I may be forgetting something, but I don’t think so. Here is my code. Let me know if there is something that I forgot.

Thanks,
Kelly

.image span {
width: 16px;
height: 16px;
font-size: 0;
background-image: url(rounded-corners.png);
* background: transparent; z-index: 0;
* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’rounded-corners.png’, sizingMethod=’fixed’);
position: absolute;
overflow:hidden;
}

By: Recursos y Tutoriales » Blog Archive » 500 links de recursos para diseñadores y desarrolladores web

Mon, 03 Mar 2008 10:00:35 +0000

[...] Css Icon Sketcher Cross-browser transparent columns Resizeable Images (without losing quality!) Adding Rounded Corners to Images Using CSS CSS Fixed Footer Hide an image in html The All-Expandable Box – box that will expand both [...]

By: Dave

Dave — Mon, 18 Feb 2008 14:35:32 +0000

Hi Bruce, JavaScript is definitely an alternative and I’ve nothing against people using that method. Personally, I like to deliver the same experience to all users so don’t mind using the extra bit of markup but I fully understand why some people don’t so think it’s always down to personal preference.

By: Bruce

Bruce — Sat, 16 Feb 2008 23:51:53 +0000

Very difficult (impossible) to achieve rounded corners in CSS 2.1 alone without sacrificing semantic mark-up, which some hold in higher regard than others. Not meaning to criticize your technique in particular Dave; it’s a common problem. I recently reviewed various methods of corner-creation (CSS, JavaScript, SVG, Flash, images, jQuery) and all this effort merely convinced me that CSS3 is the answer we needed yesterday. Ultimately I chose to use draft CSS3 for WebKit browsers but inject it via the DOM using jQuery, thus retaining a valid stylesheet. It’s a cheat to be sure, but to my mind better than littering my pages with redundant mark-up I’ll likely resent later. At least I can remove my cheat without effort once (if) CSS3 becomes a W3C standard. My 2 cents

By: kipp

kipp — Mon, 11 Feb 2008 23:02:19 +0000

Greetings,

If you combine the transparent gif idea with some CSS-transparency settings, you can get a much smoother edge on those rounded corners. Check out the cross-fading oval image on this page: http://violavalleywildflowers.com/

It uses a few concentric transparent gifs and CSS-transparency to create the rounded frame for eht erectangular images behind it.

For your purposes, it would require 4 rounded corner images (each slightly smaller than the last) – but the edge would be less jaggy.

By: Matt

Matt — Fri, 01 Feb 2008 16:17:21 +0000

Thanks Dave, this is fantastic! I have been looking for something like this for a while. In automatically generating thumbnails for a website, this makes things that much snazzier.

By: Dave

Dave — Thu, 31 Jan 2008 19:02:57 +0000

Hi Andrew, Thanks for your comment.

Here’s hoping that CSS3 comes along quickly as I suspect that using multiple background images you’d be able to apply all four images to a container and then position them accordingly. It’s likely to be a few years before that’s widely supported though and even longer before we don’t need to support the current browser which obviously don’t support this method yet.

By: Andrew

Andrew — Thu, 31 Jan 2008 18:13:53 +0000

That first tiny kitten I’ve seen too many times in “Save teh kittens from lipstick labs!!1″ banners…

Nice CSS trick, but I’m still hoping for a way to do this without presentational CSS. My first reaction would be to add the necessary HTML to class’d images using nonintrusive JS. But, like you said, that leaves everyone without JS out in the cold.

The only real solution that comes to my mind in answer to Jermayn’s question would be to use a PHP page to fetch the image, make certain areas transparent, and output the result as either PNG of GIF. Of course, this would preclude the need for CSS tricks. And it would require recoding all your img tags to call the new “image page”, so it might not be all that practical.

Good article at any rate

Andrew