Curved corners in CSS

Mattus · 28 Jul 2006 at 14:01

I was looking for a method to create boxes with curved corners in CSS. The only sort of thing I've been able to find is stuff like this, which uses 5 redundant DIVs just to create the effect? I'm not keen on using that kind of code in a web page as it seems just as bad as tables to me (mixes presentation with content), so is there a simpler way to achieve it?

Only other stuff I've found is JavaScript-based... I find using JS for something as simple as this a bit ridiculous!

Dj_Jestar · 28 Jul 2006 at 14:18

There is a much simpler way.. don't use curved corners.

The two methods you have mentioned, and the use of images are the only ways to do it.

nin9abadga · 28 Jul 2006 at 14:41

there's this too nifty corners which uses a combination of both, although i struggle to get it to work.

nin9a

tsinc80697 · 31 Jul 2006 at 01:01

{
border-style:ridge;
-moz-border-radius: 1em;
}

Works for me in firefox, but not in IE

JonD · 31 Jul 2006 at 11:31

http://www.cssplay.co.uk/boxes/curves.html

cssplay site has lots of good stuff.

Gman · 31 Jul 2006 at 15:03

I would have a look at RICO library. it's quite big as theres loads of other effects so if your just wanting a curved effect on say a div youll just have to extract the functions for that one effect.

Personally i wouldn't use the method metioned in the link above as even though it works it forces you to use needless div's that serve no purpose but to style the page. at least with using RICO you just have the one div but with a javascript effect which if javascripts been turned off won't realy effect the functionality of the site.

Deathwish · 31 Jul 2006 at 20:44

nin9abadga said:
there's this too nifty corners which uses a combination of both, although i struggle to get it to work.

nin9a

NiftyCube is his latest one and it works really well. I'm using it on my website, feel free to have a look and see if it helps you.

http://www.fwibble.org