CSS Rounded Corners

[mms]

What's the best (as in simple yet compatible in all browsers) way of making rounded corners? The one way I have heard of doing it is with background images. Is there an easier way of doing this?

 

[Grimace]

What's the best (as in simple yet compatible in all browsers) way of making rounded corners? The one way I have heard of doing it is with background images. Is there an easier way of doing this?

Nope, that is not the most efficient way. There is a line of CSS code that will do it. I know that Dreamweaver 2004 highlights that feature. I'll see if I can locate it.

 

[janey]

something like this?
http://www.vertexwerks.com/tests/sidebox/

 

[mms]

Yes, something like that. I know border-radius in CSS3 would do it, but that wouldn't be compatible. Since this is going to be a school website, it must be accesible and compatible with any browser on any platform. Would that be the best way to do it, then?

 

[Rower_CPU]

Until border-radius has wider support, images are the only way.

You might also want to check out some articles on A List Apart that touch on the subject.

http://alistapart.com/articles/customcorners/
http://alistapart.com/articles/customcorners2/
http://alistapart.com/articles/slidingdoors/
http://alistapart.com/articles/slidingdoors2/

 

[Westside guy]

Since this is going to be a school website, it must be accesible and compatible with any browser on any platform. Would that be the best way to do it, then?

Make it as a GIF with transparency - most every browser should support that. GIFs allow you to set one "color" as completely transparent - in Photoshop you do this with the "GIF89 export" functionality.

PNGs are nicer and have 256 levels of transparency available, as well as no patent encumberances (unlike GIFs); but they won't work right in Netscape 4.x or (more importantly) any version of Internet Explorer on Windows.

 

[grokman27]

Actually, you DON'T need images!

Check out http://www.pranadigital.com for an example of rounded corners and borders created without images. This technique saves bandwidth and looks very nice. Has anyone seen this done before? I may be the first.

 

[themadchemist]

something like this?
http://www.vertexwerks.com/tests/sidebox/

ooh, that's nice. all coded, too? wow, I can't wait til I have time to really dive into CSS, beyond the little experience I do have with it.

 

[mcarvin]

Mozilla has a browser-specific property that will take care of it, but I'm not sure the other browsers are going to support it anytime soon. As far as border-radius from CSS3 is concerned, which browsers support it? I'd have to check it against a Gecko flavor and Safari.

The Sliding Doors technique is probably the easiest non-script solution I've used, and it works quite well. Cut your background images right, and it's extremely low-bandwidth.

 

[kgarner]

I like the mountaintop method myself. I like how you can make two-toned boxes if you like that expand to fit any text.