Rounded corners add no doubt some smooth and elegance into the user interface. Unfortunately smoothing corners this way is easier said than done. With current technologies true rounded corners are not well supported. Many designers tend to round the rough corners as they look better than just sharp edges of the surrounding boxes. Coders, instead, try to implement this smoothness with various techniques. Some use background images while others hack the result with tons of redundant HTML elements. Nevertheless all these gimmicks usually shouldn’t be part of the content, which should stay out of the representation and only include the effective elements relative to the content.
Fortunately Cascading Style Sheets Level 3 will introduce a great deal of new techniques to rise to the challenge of modern user interface designing. The CSS Backgrounds and Borders Module includes new border-radius property to properly round the corner outside the content. The property can be separately implemented to each four corners of a box. It takes two sets of length values to define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge. The first set of values is the horizontal radius and the other set defines the vertical radius. These two sets are separated by a slash character. If the second length is omitted it is equal to the first and the corner is thus a quarter circle. If either length is zero, the corner is left square by default. If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left. The following pictures illustrate the usage of the border-radius property.
#boxA {
border-radius:1em;
}
#boxB {
border-radius:1em 3em;
}
#boxC {
border-width:thick thin;
border-radius:1.5em;
}
The basic usage requires simply one radius, which in turn is inherited to all corners resulting a equally rounded box like box A. Varying the radius for each corner separately might result a curved and tilted box something like in box B. The CSS Borders Module allows even more complicated decoration by using different line widths for each side separately as illustrated in box C.
All these forthcoming great features still lack browser support at large. Popular Firefox browser offers some workaround to accomplish the desired result. Using -moz-border-radius and -webkit-border-radius properties will do the same as CSS border-radius. These browser-dependent properties do not validate and they usually give a warning in error console, although they are not completely ignored when rendering the page.
Final words
Cascading Style Sheets give virtually endless possibilities to design the user interface. Current specification is Level 2, which already has rich set of visual formatting definitions. While the second level is still undergoing some refinements authors and implementers are encouraged to reference it from now on. Level 2 is largely supported with minor exceptions while Level 3 is merely a working draft. The draft promises even richer tools to implement the user interface. Rounded corners are just a glimpse of the new instruments in web design.