Rounded corners give your website a professional, polished look. Unfortunately, the old school way of building rounded corners is rather messy and involves a lot of redundant markup. This article explains a much cleaner way of achieving the same effect.
Building Rounded Corners With CSS and JavaScript - The CSS approach (Page 3 of 6 )
CSS are great for implementing decorative effects that improve the overall presentation of a Web page. What’s more, they are remarkably powerful for achieving outstanding background effects within pages. Since rounded corners can be implemented as background images, instead of being directly inserted into documents with <img> tags, we’ll see how to make use of CSS extensive capabilities for manipulating background images, and finally obtain our desired effect.
With CSS, a background image can be applied to any element of a page. Backgrounds can be manipulated in several ways to widely expand their visual impact.
They can be repeated horizontally, vertically, or not repeated at all. Also, they can be positioned using absolute or relative measurements, fixed while page elements scroll, and positioned relatively to each corner of the element. A few simple CSS declarations will properly explain this:
Each CSS declaration rule shows clearly how a background image can be manipulated to obtain different effects. Although this is very basic for experienced designers, it can be handy for beginners.
Whatever great flexibility stylesheets offer to designers, they still have some limitations about implementing background images.
CSS2 imposes a significant limitation: it states that only one background image can be applied to each element of the page. Considering this restriction, we should tackle the problem of rounded corners by applying four different background images to different <div> tags, each corresponding to the corner we need to be rounded. If we’re designing with a “fixed layout” in mind, then we might embed only two images within two block-level elements, for instance <div>, <p> or headers tags, to easily get the rounded corners done.
In the next section, we’ll see those possible alternative solutions.
JavaScript 
/ 44 
HTML5 Boilerplate Introduction
