There is a cool way to get rounded corners on your containers (DIV or whatever) of almost any size/dimension (radius) without using a single image. The good folks at Mozilla have provided us support for this CSS standard (sorry, IE hasn't caught up to this yet, and I'm not sure IE7 will either...if someone has newer info on this, please post).

The code is actually painfully simple. Just define the amount of radius you want for a given corner of a container's style declaration:



Of course in the you would attach the #inner declaration to a DIV: or other container element.

In this instance, we've defined an ID declaration called "inner" with a certain width, floated it left, gave it a bit of a margin all around, a border, padding and a font. But if you look closely at the last item, you'll notice a definition for the amount of radius for the border. The convention here for the 4 numbers is: upper-left, upper-right, lower-right, lower-left. In this case, we've got a nice 15px radius on the upper-left and lower-right corners. Cool! To see this in action, take a look at the following page:


RRHS B & E Academy

Be sure you're looking at this in Firefox to see the effect. In IE, it just ignores the code and renders nice square corners. Very imaginitive Bill.

Anyway, have fun with this and keep hoping IE will catch up some day!

This post has been edited by Speechist: 25 Feb, 2006 - 02:13 AM

Will this work with Safari?

I answered my own question, Yes this does work with safari!

Nice!

I am all for cross-browser compatibility but instead I'm going hope that IE maintains its Fischer-Price "My first Browser" status...and feel safe in the knowledge that more and more people are beginning to realise this.

EDIT: At least mozilla use "-moz-" as a prefix for all their proprietary CSS properties and values, which follows the W3C's standards. But of course, IE doesn't adhere to this - Microsoft it seems choose to name their vendor specific tags anything they feel like

For a few more mozilla ones, and how they're supported, check out:
http://www.blooberry.com/indexdot/css/prop...sextensions.htm

...roll on CSS3

This post has been edited by danielle_1_uk: 25 Mar, 2006 - 02:34 PM

I sure hope so! The whole cross compatibility thing between IE and Firefox from a graphics point of view is just a pain in the arse, is there anyway to make them view the page the same way? NO! Arghhhh.

Down with IE

The caveat to using this property is that any background image you use will not be rounded by this property; the background will still have the normal 90 degree angular corners that you're used to except that it'll look out of place with the rounded corners. This effectively limits you to using a solid color background, a transparent background, or a pre-built image to match the current rounded borders. Also, you need to specify padding that exceeds the space subtracted from the corners or your box contents will overlap the border in this area.

It should also be noted that this is a Mozilla-specific CSS property. As such it should work in any Mozilla-based browser such as Firefox and Netscape. If it works in Safari, that must be based on Mozilla as well.

The property is based on the W3C's CSS3 Backgrounds and Borders Module: Border Radius which is currently in draft status, so you can't blame Internet Explorer for not supporting it. Browsers aren't required to support specifications until they reach the status of "recommendation". Also note that the Mozilla implementation doesn't actually match the specification either.

Of course, this code shouldn't really hurt anything so there shouldn't be any problems using it as long as you keep in mind that only Mozilla users will see it.