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.
If we’re working with a “fixed layout” where the width of the element to which we’re applying rounded corners is fixed, let’s say 300 pixels, then we can easily create two different images: one applied to the top section of the box, and the other to the bottom section, respectively. Next, we nest the containing elements to achieve the desired effect. Let’s see the following example to understand this technique.
We’ve defined a class named “rounded,” and its width is set to 300px (fixed size). A background image is set to locate at the bottom section of the element. With the next rule, we’re defining that any h2 element contained within the “rounded” div class will have a background image located at the top of that <h2> tag.
Since the <h2> element is located on the top of the box, it’s easy to apply a background image that obviously will be positioned at the top of the <h2> element, and apply the other image to the bottom of the containing <div>. Our rounded corner effect is finally achieved.
The visual output for this technique is presented below:
The above explanation would be incomplete without the corresponding background images used for the top and the bottom section of the box. Here they are:
The top image:
and the bottom image:
That looks pretty good, right? The same effect is reached with CSS and minimal markup, due to its excellent capabilities for manipulating background images.
As said so many times, a picture is worth thousand words, so let’s see a simple diagram that shows how the above technique works, for the sake of clarity:
Documents that contain a well-defined structure, properly built to maintain the correct page’s hierarchy, are great for this technique, achieving high-impact visual effects for multiple page elements while keeping the correct internal markup structure.
Building rounded corners with four different backgrounds is our final goal, so let’s present another technique for getting a little bit closer to our main purpose.