PDA

View Full Version : CSS Rounded Corners


mms
Mar 5, 2004, 08:44 PM
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
Mar 5, 2004, 09:38 PM
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
Mar 5, 2004, 10:40 PM
something like this?
http://www.vertexwerks.com/tests/sidebox/

mms
Mar 6, 2004, 12:14 AM
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
Mar 6, 2004, 02:02 AM
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
Mar 6, 2004, 03:51 AM
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
Jul 29, 2004, 06:50 PM
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
Jul 30, 2004, 10:29 PM
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
Aug 2, 2004, 01:56 PM
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
Aug 2, 2004, 02:03 PM
I like the mountaintop (http://www.alistapart.com/articles/mountaintop/) method myself. I like how you can make two-toned boxes if you like that expand to fit any text.