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:
CODE
#inner {
width:200px;
float:left;
margin-right:2%;
border:3px solid #D6D6C2;
background:#E0E9F8;
padding: 3px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
-moz-border-radius: 15px 0 15px 0;
}
Of course in the
CODE
<body>
you would attach the #inner declaration to a DIV:
CODE
<div id="inner">Here is some content</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 AcademyBe 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 - 01:13 AM