Category: CSS

Added: 6th of March 2021

Updated On: 10th of April 2021

Viewed: 205 times

How I created rounded boxes in the early days of the web using HTML tables 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.


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 800 x 600 resolutions upwards, with the most popular resolution being 1024 x 768.

You designed websites to work in Internet Explorer only, and never gave early versions of Firefox a second thought.

Other Tips & Tutorials

CSS

Alternating div background colours using CSS

Posted: 9th of April 2021

Views: 61

CSS

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

Posted: 6th of March 2021

Views: 205

CSS

Using CSS grids to create a simple grid layout

Posted: 10th of April 2020

Views: 656

CSS

Simple CSS responsive menu for websites and mobile devices

Posted: 26th of January 2016

Views: 1386