Having developed website for almost 10 years, I have known a lot of evolutions in terms of web design. A few years back, one of the biggest frustrations was appearing when you had to make rounded corners to some elements of your website. In 2000, a time where all websites were made using the old-school <table> tag, rounded corners were done using cells. But now, with CSS3, doing rounded corners is a piece of cake. To see the evolution of HTML rounded corners, let’s compare three distinct ways of generating rounded corners.
Solution 1 – Using Table + Images
Below is an example of box using table. The corners are actually made using four 10px*10px images (bl_s1.gif, br_s1.gif, tl_s1.gif, tr_s1.gif)
<table style="background:#9c0" width="400" height="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="10" width="10"><img width="10" height="10" alt="Top Left" src="/gfx/corners/tl_s1.gif" /></td>
<td></td>
<td height="10" width="10"><img width="10" height="10" alt="Top Right" src="/gfx/corners/tr_s1.gif" /></td>
</tr>
<tr>
<td> </td>
<td valign="top" >Rounded Corners using Table + Images</td>
<td height="10" width="10"> </td>
</tr>
<tr>
<td height="10" width="10"><img width="10" height="10" alt="Bottom Left" src="/gfx/corners/bl_s1.gif" /></td>
<td></td>
<td height="10" width="10"><img width="10" height="10" alt="Bottom Right" src="/gfx/corners/br_s1.gif" /></td>
</tr>
</table>
Result :
 |
|
 |
|
Rounded Corners using Table + Images |
|
 |
|
 |
Solution 2 – Using Div + Images (relative / absolute CSS positioning)
This second solution is more recent, but still fastidious. It uses 1 <div> tag for the content (it has relative position), and 4 <img> tags for the corners (they have absolute position). This solution works well on modern browsers, but can produces unexpected results on some older ones. To accomplish that, we need to have to put the following css code in the <head> of the document :
<style type="text/css">
#box{width:380px; height:60px; padding:10px; position:relative}
#box img{position:absolute}
img#tl{left:0; top:0}
img#tr{right:0; top:0}
img#bl{left:0; bottom:0}
img#br{right:0; bottom:0}
</style>
Then display the box by putting the following code this time in the <body> of the document :
<div id="box"">
<img id="tl" width="10" height="10" alt="Top Left" src="/gfx/corners/tl_s1.gif" />
<img id="tr" width="10" height="10" alt="Top Right" src="/gfx/corners/tr_s1.gif" />
<img id="bl" width="10" height="10" alt="Bottom Left" src="/gfx/corners/bl_s1.gif" />
<img id="br" width="10" height="10" alt="Bottom Right" src="/gfx/corners/br_s1.gif" />
Rounded Corners using Div + Images
</div>
Result :
Solution 3 – Using CSS3 border-radius property
Extremely simple to implement and not using image, this solution will change your life – really.
To make a nice rounded corner box, put the code below in the head of your document :
<style type="text/css">
#box{
width:380px;
background:#9c0;
height:60px;
padding:10px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#9c0
}
</style>
Then, in the <body> of your document :
<div id="box"">
Rounded Corners using CSS3 border-radius property
</div>
Result :
Rounded Corners using CSS3 border-radius property
As you can see, this solution just makes everything easier. The only annoying thing is that in order to have the border radius displayed on all modern browsers, you must set the border-radius property three times, using border-radius, -moz-border-radius, and -webkit-border-radius. Old browsers will just have the box displayed withut any rounded corners.
