CSS Rounded Corners

M

mms

macrumors 6502a

Original poster

• Mar 5, 2004

• #1

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

macrumors 68040

• Mar 5, 2004

• #2

mms said:

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?

Click to expand...

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

macrumors 603

• Mar 5, 2004

• #3

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

 

M

mms

macrumors 6502a

Original poster

• Mar 5, 2004

• #4

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

Moderator emeritus

• Mar 6, 2004

• #5

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

macrumors 604

• Mar 6, 2004

• #6

mms said:

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?

Click to expand...

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.

 

G

grokman27

macrumors newbie

• Jul 29, 2004

• #7

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

macrumors 68030

• Jul 30, 2004

• #8

übergeek said:

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

Click to expand...

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.

 

M

mcarvin

macrumors regular

• Aug 2, 2004

• #9

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

macrumors 68000

• Aug 2, 2004

• #10

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