Building Rounded Corners With CSS and JavaScript

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.

First off, let’s declare our style rules:

<style type="text/css">
.rounded {
  width: 300px;
  background: #00f url(imgbottom.gif) no-repeat bottom center;
  padding-bottom: 40px;
}
div.rounded h2 {
  background: transparent url(imgtop.gif) no-repeat top center;
  padding-top: 40px;
}
</style>

Then, let’s write our markup:

<div class="rounded">
<h2>Title section here</h2>
<p>More content</p>
<p>More content</p>
<p>More content</p>
</div>

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.