Category: CSS

Added: 6th of March 2021

Updated On: 10th of April 2021

Viewed: 544 times

How I created rounded boxes in the early days of the web using HTML tables, .gifs and Photoshop

This article was rechecked and updated on 10/04/21

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>


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.

Other Tips & Tutorials

CSS

CSS keyframes animation, move text around the screen in a square path

Posted: 2nd of June 2021

Views: 339

CSS

CSS animation, rotate image 90 degrees using transform rotate

Posted: 20th of May 2021

Views: 364

CSS

Alternating div background colours using CSS

Posted: 9th of April 2021

Views: 477

CSS

How I created rounded boxes in the early days of the web using HTML tables, .gifs and Photoshop

Posted: 6th of March 2021

Views: 544

CSS

Using CSS grids to create a simple grid layout

Posted: 10th of April 2020

Views: 1038

CSS

Simple CSS responsive menu for websites and mobile devices

Posted: 26th of January 2016

Views: 1815