Link Effects

Box Shadows


IMC Home Page

Curves (continued)

Curve Variables

This is Example 2. It has corners with very large radii

It is possible to customize the corner curves. For example, the buttons of the navigation on the left have been customized. The div on the right, Example 2, features large radius corners to give it a lozenge shape. The CSS for the rule for Example 2 is:

border-radius: 25px


NOTE: The snippet above does not show the entire rule, so you will have to add the necessary properties and attributes, such as margin, border, padding, and so on.

This div is 50 pixels high. View this with Mozilla and Webkit browsers to see the difference

Note: Arithmetic plays and important role in whether or not the curved corners are displayed. The numbers must all "add up" in a logical manner. For instance, let's say that you have a div that is 50 pixels high such as the one on the right. The curves are specified as 30 pixels. This results in an "overlap" of 10 pixels. It is as if the curved corners interfere with each other. With new browsers the curves appear to be averaged out and the ends of the div are rounded. With older Safari and the current Chrome browsers the specifications are ignored and the div reverted to square corners.

This is Example 3. It demonstrates asymmetrical corners.

Making asymmetrical corners is only a little bit more complicated. The div on the right has a classic "folder tab" shape with curved top corners and square bottom corners. The CSS rule in "shorthand" for this effect is:

border-radius: 10px 10px 0px 0px

Border radius rules follow Cascading Style Sheet syntax and specify the corners in a "round the clock" style starting at the top left position and then moving clockwise around the div. All the attributes are written in the one property/attribute set.

You may wish to avoid the shorthand writing style and use the more formal "longhand" method. While it require more writing, it also prevents mis-interpretions by the browser. Here is the longhand version of the rule:

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;

The entire CSS3 rule for Example 3 is:

#Example3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000;
background-color: #FC0;
float: right;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
padding: 4px;
margin-bottom: 10px;
margin-left: 8px;
width: 150px;
text-align: center;

As you can see, it is slightly more complicated, but it is also more specific and less prone to display errors.

< Return to Page 1 > < Continue to Page 3 >