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:

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

And here is the HTML code:

{code type=HTML}

{/code}

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:

{code type=CSS}
#middleDiv
{
background:#FF6801; width:240px; height:100%; padding:0px 10px 0px 10px;
}
{/code}

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:

{code type=HTML}

{/code}

Step Five: Setting the bottom

Here is the CSS code:

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

And here is the HTML code:

{code type=CSS}

{/code}

Step Six: Code altogether

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

Here is the CSS code:

{code type=CSS}

{/code}

And here is the HTML code:

{code type=HTML}

{/code}

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:

{code type=CSS}
.roundTable
{
width:260px; border:0px;
}
{/code}

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:

{code type=HTML}

{/code}

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:

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

And here is the HTML code:

{code type=HTML}

{/code}

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:

{code type=CSS}
.middleTD
{
background:#FF6801; padding:0px 10px 0px 10px;
}
{/code}

And here is the HTML code:

{code type=HTML}

{/code}

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:

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

And here is the HTML code:

{code type=HTML}

{/code}

Step Seven: Code altogether

Here is the CSS code:

{code type=CSS}

{/code}

And here is the HTML code:

{code type=HTML}

This is a line to show how it is going with the content. This my another line of content.

This is a line to show how it is going with the content. This my another line of content.

{/code}

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.