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. In general, the traditional way to create rounded corners on a Web page involves using images. Specifically, however, there are several different techniques for doing 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 certain page elements, such as divisions (divs). As it turns out, you can give divs rounded corners. In fact, all the rounded corners you see on this page are made using Cascading Style Sheet rules.
The biggest problem is that Internet Explorer 8 and below will not display rounded corners. Firefox, Safari, 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. At the time of this writing Internet Explorer 8 (current version is IE9) does not support rounded corners. That means page visitors using Firefox, Safari, and Chrome will get one view, IE8 (and older) visitors will see another.
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
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 browers each follow a slightly different set of rules. We will try to make this as easy as possible to understand.
For older browsers, the part of the CSS rule that makes this work is:
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
For newer browsers the CSS phrasing has become much simpler. It is this:
border-radius: 6px;
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 morder-radius: 6px; phrasing. You can see how the rules for the curves are incorporated into the syntax of the style.