Introduction

Link Effects

Box Shadows

Curves

IMC Home Page

Curves

Introduction to Curves

Sooner or later you, as a Web designer or Web page builder, will want to create page elements with rounded corners. The trouble is that the basic layout model for Web pages is founded on boxes, and these boxes do not have rounded corners. The old "traditional" way to create rounded corners on a Web page involved using images. There are several ways to accomplish this. Some are more complicated than others. But, in each instance it is necessary to make a series of images and then assemble them in the correct structure.

In many instances it would be much easier to apply rounded corners directly to page elements, such as divisions (divs). As it turns out, you can apply rounded corners to divs. In fact, all the rounded corners you see on this page are made using Cascading Style Sheet 3 rules.

The biggest problem is that Internet Explorer 8 and below will not display rounded corners. New versions of Internet Explorer, Firefox, Safari, Opera, and Chrome do show rounded corners. Rounded corners are a CSS3 and HTML 5 feature. Many CSS3 and HTML 5 features are not implemented on all browsers, although more are coming online with each new browser update.

Does this make a difference? That depends on your design philosophy. In fact it is impossible for all visitors to see Web pages exactly the same. There are too many differences in the way that browsers render layout, fonts, images, and other page elements to guarantee that page views will be identical. That means you will have to decide how critical it is that all visitors to your pages see the curves.

NOTE: To see how this can affect your design, view this page with both Internet Explorer 8 and another browser to see the rendering differences.

How to Make Curves

This is Example 1 and has 6 pixel curves at each corner

Making divs with curves is simple. All you have to do is specify the radius of the curve. The div on the right is called "Example 1" and features 6 pixel curves on all corners. Be sure to view this with both Internet Explorer and non-Internet Explorer browsers.

NOTE: This next part will get a bit tricky because various versions of the browsers each follow a slightly different set of rules. We will try to make this as easy as possible to understand.

In the "old days" the border radius feature had to be implemented using several versions of the CSS style rule. As with old box shadow rules you had to write the specification several different ways. Here is an example:

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;

Al new browsers us simplified syntax. It is this:

border-radius: 6px;

This is Example 1a and has 6 pixel curves at each corner

Naturally, there is a lot more to the CSS rule than the lines above. The div shown to the right, has padding and margins, and more. The entire CSS rule is:

#Example1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #FFF;
background-color: #036;
float: right;
border-radius: 6px;
padding: 5px;
margin-bottom: 10px;
margin-left: 8px;
width: 150px;
text-align: center;
}

Notice that we are using the simpler border-radius: 6px; phrasing. You can see how the rules for the curves are incorporated into the syntax of the style.

< Continue to Page 2 >