Rounded corners - No images

IE solution is needed

[CSS_Kidd]

I am looking for a new way to create rounded corners for my divs without using any images. I also need this to work in IE as well.

Right now I am currently using css3 -moz/-webkit-border-radius along with a .htc w/behavior:url(htcfile.htc)in the css. There are a few problems with this method.

1. Not compatible with IE if 3 or less corners are rounded (think tabs). All corners have to be rounded or it will just come out as having all corners squared in IE.

2. When used in IE, even when all corners are rounded, it will remove padding on the right side of divs. So content in that div will have to have a specified size.

3. It will combine divs that have the same class name setting one after the other into one div.

What I want to know is if there is a solid IE fix/hack out there that doesn't use images, will not affect the flow of the layout, and can do less than all 4 corners.

Or... Should I just design with -moz and -webkit and let IE have the squared corners? Because....Hey.... Opera 10 doesn't even pick it up or have a fix.

Any Ideas?

[swa66]

I have a few sites that use the CSS3 & pre CSS3 border-radius settings, and fall back to square corners for IE (all versions, including IE8) and opera.

So far no complaints , and looking at the stats of the biggest of them: Only 40% of their users would get the degraded version.

I did have a workaround ready using conditional comments to fix it for IE with a bunch of backgrounds, but the customer opted not to do it.

They still have a graphical tab for their menu (sliding doors) but the subtle shading in there is something they wanted to keep (the file is real small anyway).

[CSS_Kidd]

OK, I found a looong list of variations at [].. Look at the bottom of the home page... there is a posting for rounded corners in the "Popular Post" section... There are a lot so it is going to take me a while to look through them.

swa66,
That is exactly what I do for my clients sites... However their stats show 58% of IE users. I always freak out and then I think about it. If that is all they use that is all they will ever see. Unless they see in a different browser on someone else' machine. Then hey! Maybe that will convince them to use something different. I don't know.

[edited by: SuzyUK at 1:26 pm (utc) on June 5, 2009]
[edit reason] No URLs per charter thanks [/edit]

[simonuk]

I'm working on a huge project involving thousands of people and the CMS is incredibly restrictive. They also wanted curves but I don't have enough ID's or classes to put them on.

I played with CSS3 and I dashed the border so it doesn't look quite so rigid and square on IE. Clients loved it and we've adopted it for the sites.