How I created rounded boxes in the early days of the web using HTML tables, .gifs and Photoshop
ID: 256
Category: CSS
Added: 6th of March 2021
Updated On: Tutorial updated and rechecked on 10th of April 2021
Views: 2,036
CSS3 is great, it's simplified complicated webdesign. It got me thinking of the steps I had to take to create a simple rounded box before border-radius became a standard in web browsers
Today we can use the following CSS incline code to create a rounded box
<div style="max-width:100%; padding:10px; border-radius:10px; height:22px; background:#ccc;"></div>
Before border-radius
To start with, I would create one gif in Photoshop. I would then rotate the layer until I had saved my four rounded corners. I couldn't save the images as .png files with a transparant background, as this wasn't supported in Internet Explorer at the time. Saving any .gif with a transparent background would require a clean up around the edges using Photoshop.
top_left.gif
top_right.gif
bottom_left.gif
bottom_right.gif
I would then use the following code in HTML to create the rounded box.
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="article_images/top_left.gif">
</td>
<td width="100%" bgcolor="#cccccc">
</td>
<td>
<img src="article_images/top_right.gif"></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="10">
<tr>
<td width="100%" bgcolor="#cccccc"></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="article_images/bottom_left.gif"></td>
<td width="100%" bgcolor="#cccccc"></td>
<td>
<img src="article_images/bottom_right.gif">
</td>
</tr>
</table>
<tr>
<td>
<img src="article_images/top_left.gif">
</td>
<td width="100%" bgcolor="#cccccc">
</td>
<td>
<img src="article_images/top_right.gif"></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="10">
<tr>
<td width="100%" bgcolor="#cccccc"></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="article_images/bottom_left.gif"></td>
<td width="100%" bgcolor="#cccccc"></td>
<td>
<img src="article_images/bottom_right.gif">
</td>
</tr>
</table>
That's a lot of code right there.
Modern website design simply wouldn't be possible using standard HTML tables today, especially when you need to consider how many different screen sizes and devices your website is going to be viewed on.
In the early days of the web design you only had to think about designing websites for 800px X 600px resolutions upwards, with the most popular resolution being 1024px X 768px.
You designed websites to work in Internet Explorer only, and never gave early versions of Firefox a second thought.
