can you round corners in css ?

ah thanks guys :D

edit- update

using the curvy corners as it supports all platforms now :) thanks again guys
 
Last edited:
Personally, I wouldn't be happy with all the markup that drops in.

On sites with a lot of rounded corners, I just use jquery to drop in 4 divs automatically which I can then apply a background to and absolutely position into the corners. If someone doesn't have JS enabled, they just see square corners.

I still make sure my sites are perfectly viewable in IE6 but I don't care about giving those users a bit of extra eye candy so I just display: none; on the divs in a conditional style sheet. The reason for this is because IE6 doesn't like to round numbers correctly so the divs need to be set height and width or else they may appear 1px off in IE6. Set width is almost always fine but the content can change so set height is out.
Once again, this works fine and IE6 users just see square corners.

If the client really wants IE6 users to see the rounded corners as well (or if there aren't many rounded corners in the layout), I use two divs with two backgrounds. One background is as long as the content could ever need to be and includes the top (saved as png8, this is usually only 10k for a 2000px long image). The other background is just the bottom and only as tall as it needs to be to include the corners.

Alternatively, you can do this with 3 divs top, middle and bottom. I prefer two divs though because there is less markup and the image size is so small that it makes no difference.
 
Add rounded corners in CSS, but let it fall back to square corners if it's not supported.

Simple, easy, and at the end of the day, isn't a massive failing, and doesn't require messy Divs or JS to do it! ;)
 
What you fail to mention is that it doesn't work in IE6, IE7 or IE8.
I don't care about IE6 but my boss would freak if I said, "let's just forget about the 35-40% of our users who have IE7."
 
You must log in or register to reply here.
Back
Top Bottom