Round image corner in HTML & CSS using Table or DIV

November8

Many times in many sites, you have of course seen round or circular corners. Developers often use round corners to give the site more attractive and professional look. When I was new to web development and trying to figure out how to make the tables’ corners round or circular or oval, I thought it must be a very tough task. Because I was searching solution in Google.com and all the solutions I found was either tough or I could not like. Ha ha. Later I found my own way. But I am sure many developers are using this already.

Here I share my easy and simple way:

Round Corner in DIV:

Step One: Creating a colorful table in Adobe Photoshop, Illustrator or any other tool

I have used Adobe Illustrator’s Rounded Rectangle Tool to create a round corner image. Then I saved it as ‘Save for web’, JPG format and in maximum image resolution. Here is the orange color round corner image:

Step Two: Separating the top and bottom

Now I cut 20 pixels from the top of the rounded image and I name it as ’round-top.jpg’. Here it is:

It is 260 pixels in width and 20 pixels in height.

Next I cut 20 pixels from the bottom of the rounded image and I name it as ’round-bottom.jpg’. Here it is:

It is 260 pixels in width and 20 pixels in height.

Step Three: Setting the top

Here is the CSS code:

#topDiv
{
	background:url(images/round-top.jpg) left top no-repeat;
	width:260px; height:20px;
}

And here is the HTML code:

	<div id="topDiv"></div>

Step Four: Setting the mid section

In the mid section we are going to place another DIV and we will put our text, image or any other content inside it. Here is the CSS code:

#middleDiv
{
	background:#FF6801; width:240px; height:100%; padding:0px 10px 0px 10px;
}

Notice that although the width of other DIVs is 260 pixels, this DIV has only 240 pixels. That means 20 pixels smaller than other DIVs. This is because we are giving 10 pixels padding in left and 10 pixels padding in right. This total 20 pixels padding will be added with our 240 pixels and make the DIV size looking like a 260 pixel DIV.

And here is the HTML code:

<div id="middleDiv">
    	This is a line to show how it is going with the content.<br /><br />
        This my another line of content.
    </div>

Step Five: Setting the bottom

Here is the CSS code:

#bottomDiv
{
	background:url(images/round-bottom.jpg) left bottom no-repeat;
	width:260px; height:20px;
}

And here is the HTML code:

    <div id="bottomDiv"></div>

Step Six: Code altogether

If we put all code together, it will look like this:

Here is the CSS code:

<style type="text/css">
#topDiv
{
	background:url(images/round-top.jpg) left top no-repeat;
	width:260px; height:20px;
}
#middleDiv
{
	background:#FF6801; width:240px; height:100%; padding:0px 10px 0px 10px;
}
#bottomDiv
{
	background:url(images/round-bottom.jpg) left bottom no-repeat;
	width:260px; height:20px;
}
</style>

And here is the HTML code:

<body>
    <div id="topDiv"></div>
    <div id="middleDiv">
    	This is a line to show how it is going with the content.<br /><br />
        This my another line of content.
    </div>
    <div id="bottomDiv"></div>
</body>

And that’s it!

You can see the demo here: Demo of rounded corner in DIV
I suggest you visiting this link, opening the source code and taking a look.

Round Corner in Table:

Step One: Creating a colorful table in Adobe Photoshop, Illustrator or any other tool

Just follow the same as Step One of the Round Corner in DIV section above.

Step Two: Separating the head and bottom

Just follow the same as Step Two of the Round Corner in DIV section above.

Step Three: Setting the table tag

Here is the CSS code:

.roundTable
{
	width:260px; border:0px;
}

Notice that we have set the table widht to 260 pixels that is equal to our top and bottom images’ width. We do not need to mention the table width to any other place.

And here is the HTML code:

	<table border="0" cellpadding="0" cellspacing="0" class="roundTable">

Step Four: Setting the top

We simply set the TD background to ’round-top.jpg’ and set its height equals to the ’round-top.jpg’ image which is 20 pixels.

Here is the CSS code:

.topTD
{
	background:url(images/round-top.jpg) left top no-repeat;
	height:20px;
}

And here is the HTML code:

	<tr>
		<td class="topTD">&nbsp;</td>
	</tr>

Step Five: Setting the middle section for the content

We simply keep 10 pixels padding in both left and right side and set the background.

Here is the CSS code:

.middleTD
{
	background:#FF6801; padding:0px 10px 0px 10px;
}

And here is the HTML code:

	<tr>
		<td class="middleTD">
			This is a line to show how it is going with the content.<br /><br />
			This my another line of content.
		</td>
	</tr>

Step Six: Setting the bottom

We simply set the TD background to ’round-bottom.jpg’ and set its height equals to the ’round-bottom.jpg’ image which is 20 pixels.

Here is the CSS code:

.bottomTD
{
	background:url(images/round-bottom.jpg) left bottom no-repeat;
	height:20px;
}

And here is the HTML code:

	<tr>
		<td class="bottomTD">&nbsp;</td>
	</tr>

Step Seven: Code altogether

Here is the CSS code:

<style type="text/css">
.roundTable
{
	width:260px; border:0px;
}
.topTD
{
	background:url(images/round-top.jpg) left top no-repeat;
	height:20px;
}
.middleTD
{
	background:#FF6801; padding:0px 10px 0px 10px;
}
.bottomTD
{
	background:url(images/round-bottom.jpg) left bottom no-repeat;
	height:20px;
}
</style>

And here is the HTML code:

<body>
	<table border="0" cellpadding="0" cellspacing="0" class="roundTable">
		<tr>
			<td class="topTD">&nbsp;</td>
		</tr>
		<tr>
			<td class="middleTD">
				This is a line to show how it is going with the content.<br /><br />
				This my another line of content.
			</td>
		</tr>
		<tr>
			<td class="bottomTD">&nbsp;</td>
		</tr>
	</table>
</body>

And that’s it!

You can see the demo here: Demo of rounded corner in TABLE
I suggest you visiting this link, opening the source code and taking a look.

By the way, nowadays I am no more using tables. Rather I have shifted to table-less CSS based DIV style design. And I feel very comfortable using this technique in my DIV structured design.

You can download sample code from here:
Source Code for Round image corner in HTML & CSS using Table or DIV

Thanks for reading.

posted under CSS, DHTML | 9 Comments »

Tableless Web Design in CSS: 2 & 3 columns with Header & Footer

October24

Hello Folks,

You know the web design has already transferred from the table based design to tableless design. This does not you will never use tables. What it means that using table in building website structure is getting rare. But why do people go for tableless design? Although there are many reasons, the most important reason is you save a lots of bandwidth by coding cleaner and fewer lines. Tableless web design is fun too!

But I must admit that it is a very easy tutorial for anyone. My target audience is those who are new to website design and wish to start designing in tableless format.

If you do not understand the whole article at the first time, my suggestion is you read it again.

OK. Let us start. Here we go:

2 Column tableless page design

Step One: A 2 column complete page coding

First take a look at the page code below. You can see the output here: 2 Column Page Output

I suggest you go to this output page, open the source code and take a look for a better indent view.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>2 Column CSS Example</title>
<style type=”text/css”>

BODY
{
margin:0px; padding:0px; text-align:center;
font-family:Arial, Helvetica, sans-serif; font-size:12px;
}
P
{
margin:0px; padding:17px 0px 0px 0px;
color:#CCCCCC;
}
H1
{
margin:0px; padding:25px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif; font-size:20px;
color:#FFFFFF;
}
UL
{
margin:0px; padding:0px;
}
LI
{
list-style:none; padding:5px 0px 0px 20px;
}
LI A
{
color:#CCCCCC; text-decoration:none;
}
LI A:hover
{
color:#FFFFFF; text-decoration:underline;
}
#pageText
{
padding:15px 0px 0px 20px;
}
#container
{
width:775px; margin:0 auto;
}
#header
{
width:100%; height:100px; background:#990000;
}
#content
{
clear:both;
}
#leftColumn
{
width:275px; height:300px; background:#000000;
text-align:left;
float:left;
}
#rightColumn
{
width:500px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}
#footer
{
width:100%; height:50px; background:#330033;
clear:both;
}

</style>
</head>

<body>

<!– CONTAINER starts here –>
<div id=”container”>

<!– HEADER starts here –>
<div id=”header”>
<h1>2 Column CSS Example</h1>
<p>Sub Title</p>
</div>
<!– HEADER ends here –>

<!– PAGE CONTENT starts here –>
<div id=”content”>

<!– LEFT COLUMN starts here –>
<div id=”leftColumn”>

<!– LEFT MENU starts here –>
<ul>
<li><a href=”#”>This is the first navigation link</a></li>
<li><a href=”#”>This is the second navigation link</a></li>
<li><a href=”#”>This is the third navigation link</a></li>
<li><a href=”#”>This is the fourth navigation link</a></li>
<li><a href=”#”>This is the fifth navigation link</a></li>
</ul>
<!– LEFT MENU ends here –>

</div>
<!– LEFT COLUMN ends here –>

<!– RIGHT COLUMN starts here –>
<div id=”rightColumn”>
<div id=”pageText”>Your page content goes here.</div>
</div>
<!– RIGHT COLUMN ends here –>

</div>
<!– PAGE CONTENT ends here –>

<!– FOOTER starts here –>
<div id=”footer”>
<p>Copyright © 2008. Tanzilo Insido PHPo MySQLo</p>
</div>
<!– FOOTER ends here –>

</div>
<!– CONTAINER starts here –>

</body>
</html>

In the following steps, I am going to clarify what I have done and how.

Step One: The CONTAINER div is holding the whole page content

First of all, please note that we have kept all our content elements inside a container DIV element:

And here is the CSS for this section:

#container
{
width:775px; margin:0 auto;
}

Notice that this is a fixed width design of 775 pixels and the part margin:0 auto; sets the content area in the page center alignment.

Step Two: The HEADER AND FOOTER

Now we have three main areas inside our container div and there they are:

In the header div section, we only put a two line text and in the footer div section, we put just the copyright information.

Here is the CSS for header div:

#header
{
width:100%; height:100px; background:#990000;
}

Note that we are clearly specifying the width and height of the header section. Sometimes you may find that this section is not appearing. It may happen if you do not mention the values for height and/or width clearly.

And here is the CSS for footer div:

#footer
{
width:100%; height:50px; background:#330033;
clear:both;
}

We clearly specified the values for height and width again. But specially notice the clear:both; part. Why do we write this line? Because we are using floating feature. When we use clear:both;for a div area, it floats left by default and does not mess up with any other div area.

Simple. Huh?

Step Three: The CONTENT div

We have put our two columns in the content div:

And here is the CSS for content div:

#content
{
clear:both;
}

Notice that we are using clear:both; coding to avoid any mess up with the header. If you do not clear your div, it will automatically try to be positioned side by side with the preceeding div (provided it gets enough space there).

Step Four: The two columns in the CONTENT div

Inside our content div element, we have two div element and those are leftColumn div and rightColumn div.

Here is the CSS for leftColumn div:

#leftColumn
{
width:275px; height:300px; background:#000000;
text-align:left;
float:left;
}

And here is the CSS for the rightColumn div:

#rightColumn
{
width:500px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}

You specially need to notice the following two things

1. We are using float feature for both of them and floating both of them to left.
2. Add the witdh of the leftColumn and rightColumn and that is 775 pixels (225 px + 500 px) that is exactly equal to the width of our container div (775 px).

What I am trying to say is: when you float two DIVs to the same direction (i.e. left in our case), they take position side by side as like two columns. But the total width of both of them must be equal to or less than the width of the div they are positioned.

Step five: Putting something in the left and right columns

We assign some text in the left and right columns and thus we are done.

3 Column tableless page design

Step One: A 3 column complete page coding

First take a look at the page code below. You can see the output here: 3 Column Page Output

I suggest you go to this output page, open the source code and take a look for a better indent view.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>3 Column CSS Example</title>
<style type=”text/css”>

BODY
{
margin:0px; padding:0px; text-align:center;
font-family:Arial, Helvetica, sans-serif; font-size:12px;
}
P
{
margin:0px; padding:17px 0px 0px 0px;
color:#CCCCCC;
}
H1
{
margin:0px; padding:25px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif; font-size:20px;
color:#FFFFFF;
}
UL
{
margin:0px; padding:0px;
}
LI
{
list-style:none; padding:5px 0px 0px 20px;
}
LI A
{
color:#CCCCCC; text-decoration:none;
}
LI A:hover
{
color:#FFFFFF; text-decoration:underline;
}
#pageText
{
padding:15px 0px 0px 20px;
}
#container
{
width:775px; margin:0 auto;
}
#header
{
width:100%; height:100px; background:#990000;
}
#content
{
clear:both;
}
#leftColumn
{
width:200px; height:300px; background:#000000;
text-align:left;
float:left;
}
#middleColumn
{
width:375px; height:300px; background:#FFFFFF;
text-align:left; color:#000000;
float:left;
}
#rightColumn
{
width:200px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}
#footer
{
width:100%; height:50px; background:#330033;
clear:both;
}

</style>
</head>

<body>

<!– CONTAINER starts here –>
<div id=”container”>

<!– HEADER starts here –>
<div id=”header”>
<h1>3 Column CSS Example</h1>
<p>Sub Title</p>
</div>
<!– HEADER ends here –>

<!– PAGE CONTENT starts here –>
<div id=”content”>

<!– LEFT COLUMN starts here –>
<div id=”leftColumn”>

</div>
<!– LEFT COLUMN ends here –>

<!– MIDDLE COLUMN starts here –>
<div id=”middleColumn”>
<div id=”pageText”>Your page content goes here.</div>
</div>
<!– MIDDLE COLUMN ends here –>

<!– RIGHT COLUMN starts here –>
<div id=”rightColumn”>
<div id=”pageText”>Your right column content goes here.</div>
</div>
<!– RIGHT COLUMN ends here –>

</div>
<!– PAGE CONTENT ends here –>

</div>
<!– CONTAINER ends here –>

</body>
</html>

Explanation for the 3 column design:

When you understand 2 column design, it is very easy to understand the three column design too since they are very similar. Everything else are as they were but now we have three columns in the content div:

Left column CSS:

#leftColumn
{
width:200px; height:300px; background:#000000;
text-align:left;
float:left;
}

Middle column CSS:

#middleColumn
{
width:375px; height:300px; background:#FFFFFF;
text-align:left; color:#000000;
float:left;
}

Right column CSS:

#rightColumn
{
width:200px; height:300px; background:#003300;
text-align:left; color:#CCCCCC;
float:left;
}

Well. Notice that (1) we are floating them all to the left direction to keep them side by side in column style and (2) the total width of all the three columns is (200 px + 375 px + 200 px) or 757 pixels which is exactly equal to the width of the container div (775 pixels).

#container
{
width:775px; margin:0 auto;
}

Thus, you can make as many columns as you want. But make sure the total width of all your columns is smaller than or equal to the available space (width).

I tries my best to keep this post as easy as possible. If you are not clear or do not understand the whole article at the first reading, I suggest you giving a second reading.

Thanks for reading.