Reusable rounded edges using CSS and HTML

Rounded edges are the trend now, everything has to be smooth and slick — and rounded. There are various techniques to achieve rounded edges. Today, as well as in an upcoming articles, I will describe some that are lazy enough that you should bother using them.

Let’s start with the simplest case — you have a page with solid background, but several boxes of different color. Similar to this case scenario — tweet.IM, a nice service for Twitter:

So the first idea is to make each rounded edge in blue, green and navy on a white background — but that last box has an image background, how to cope with that? Well, this gives you a hint that the idea is wrong. The correct approach is to make just one edge for each corner with the white part visible, and transparency in the place, where previously we wanted to paint blue, green and navy. Just like below (image magnified):

That particular piece is for bottom-left corner. By making the other 3 corners (rotating by 90 degrees each in your favorite image editor), we obtain a set of rounded edges, which we can apply to any box, even if its background is an image! We will need some CSS and HTML to achieve that. Also, note that the best result is when using alpha-channel PNG-24 image (IE6 doesn’t parse it, but there are lots of hacks to make it work).

The idea is to have a block element representing the box (for example div) positioned either absolutely or relatively — this way, elements inside that box can be positioned absolutely in respect to that box (it’s like a holy grail, we achieve relatively-absolute positioning!). Firstly, define a general edge element:

div.edge {
    position: absolute;
    width: 20px;
    height: 20px;

    background-repeat: no-repeat;
}

In the above code, we say that each edge block will be positioned absolutely inside its parent element, as well as have the size of the edge image, which I showed before. We will display the edge images as the background of each edge block. This way, site visitors won’t see image placeholders in the corners of the boxes, but once the browser loads them, they will magically appear. Even though no repetitions will be visible, lets set the no-repeat parameter, just in case.

Next, we prepare the actual edges, by defining div elements on each corner of the box, with the appropriate edge image displayed in the background:

div.tl { /* top-left */
    top: 0;
    left: 0;
    background-image: url(tl.png);
}
div.tr { /* top-right */
    top: 0;
    right: 0;
    background-image: url(tr.png);
}
div.bl { /* bottom-left */
    bottom: 0;
    left: 0;
    background-image: url(bl.png);
}
div.br { /* bottom-right */
    bottom: 0;
    right: 0;
    background-image: url(br.png);
}

Once we’re done with that, the one thing left is to actually attach the rounded edges to our boxes. In case of the green box in our example scenario, the code would be as follows:

<div id="green"> 
    <div class="edge tl"></div> 
    <div class="edge tr"></div> 
    <div class="edge bl"></div> 
    <div class="edge br"></div> 
    <div class="content">
        <!-- place for the box content //-->
    </div>
</div>

We use the fact that the green div is positioned relatively. Therefore, all edge div elements position themselves in the corners. We also benefit from using multiple classes in one declaration, as we don’t need to duplicate CSS code. A good idea is to set a padding value for the content div equal to the 3/4 of the size of each rounded edge image. And as you can see, this technique works really well with boxes with image backgrounds.

Next time, I will show how to make any block element with rounded edges using pure CSS! Stay tuned.