Introduction

Link Effects

Drop Shadows

Curves

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

But for older browsers it is:

-moz-border-radius: 25px;
-webkit-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 for this effect is:

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

In the older browsers the effect is written like this:

-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;

Newer browsers follow standard 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. Older Webkit browsers allow one property/attribute set to describe all the corners, but variations from that original attribute have to be specified separately.

In the code above all the corners are affected by:

-webkit-border-radius: 10px;

But, the bottom corners are affected by:

-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;

NOTE: We are sometimes asked if it is necessary to write the CSS for both newer and older browsers. This can be a difficult question to answer definitively. At the time of this writting, the older browsers are rapidly being replaced by the latest versions. It is almost certain that the majority of you site visitors will be able to see properly rounded corners using the simpler border-radius: syntax.

 

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