DIVs with rounded corners

mlse · 06-01-2005, 03:51 PM

Hi,

I would like to use DIVs (or whatever) with rounded corners to enclose the various elements of my web pages.

I have written a noddy bit of PHP which auto-generates a PNG image and allows you to specifiy the width, height, border thickness, corner radius, background colour, border colour, etc, etc of the image with transparent bits outside the corners. This image can then be set as a DIV background.

This is OK, but is there a pure CSS way of doing this? It would be nice to do it as pure CSS because, although my method works, it involves a couple of hacks and it's "icky".

TIA,
Mike.

bazz · 06-01-2005, 05:13 PM

AKAIK, rounded corners are not supported by css2 but maybe they will be in css3?

Someone on here, much cleverer than me, posted a solution some time ago, which comprised a top gif which was a rectangle with its top corners rounded and another, for the bottom with its bottom corners rounded. Then in the css, these were assigned as background colors for parts of the style. I dont have the link handy otherwise I'd post it ;p sorry.

no guesses for why I remember the post. Back then, I wanted rounded corners too and they were decribed as s-o-o-o, last tuesday

Bazz

mlse · 06-01-2005, 05:52 PM

Sounds similar to my solution using a PNG image!

So corners are just sooo last tuesday, eh? Like they're just so totally last season ... oh ya, like, y'know, kinda, like, whatever!

mlse · 06-01-2005, 06:00 PM

In the words of Baldrick, "I have a cunning plan ..."

(If you're not English and you never saw Blackadder, you won't understand that one!).

Skyzyx · 06-01-2005, 06:42 PM

I'd check out Nifty Corners: Rounded corners with CSS and JavaScript. It doesn't use images, and it's just a behavioral and style layer, so it downgrades and lifts right off your (X)HTML should your user's browsers not support it.

mlse · 06-01-2005, 10:29 PM

Nice.

Ta.