Todays Round Cornred websites become most popular. It will increases the better appearance webpage and attracting view to the visitors. It will mostly used on the sidebars of the website. It is a method just inserting the images in the corner positions of the website layout in background. It is really simple I can explain how it can do and how it works.
In this topic you can know about the HTML TAG known as “<div></div>” tag it is used after the <body> tag and it is used to create the layout to the website.And secondly you want to create the round corner images as follows.
Left-top name as lt.gif
Right-Top name as
rt.gif
Left-Bottom name as lb.gif
Right-Bottom name as rb.gif
After that create a webpages with following code.
<html> <head> <title>My first round corner</title> </head> <style>.bl
{background: url(img/lb.bmp) 0 100% no-repeat #e68200; width: 20em}/*The following is comment of the above code please read otherwise we will not understand*/
/*-- In above I used the word ".bl" it is a class used as ID on the <div class="bl"> and it will get the settings which the image (lb.bmp) position in the corners of the layout. and same as follow ".br,.tl,.tr" and I opened the flower brackets “{}” in this brackets we can insert the settings of the image or other . I am inserted the image on background with the help of “url” it shows the path of the image where it was and its position is 0 100%. It means the first 0(zero) is distance from left side of the page layout and second 100% is distance from top of the layout to the image some times "px","em","cm" in the place of "%" as we like. And I used the "no-repeat" word it the repeat setting used as X and Y angles repeation of background image when we code as "repeat-x" the background image repeat as horizontally and we code as "repeat-y" the background image repeat as vertically. And “width” is a width of the cell or column I set as "20em" and we can also set as
"px","cm","%"in the place of “em”. And finally #e68200 is the color of the background. */.br
{background: url(img/rb.bmp) 100% 100% no-repeat}.tl
{background: url(img/lt.bmp) 0 0 no-repeat} .tr {background: url(img/rt.bmp) 100% 0 no-repeat; padding:10px}.clear {font-size: 1px; height: 1px}
</style><body>
<div class="bl"><div class="br"><div class="tl"><div class="tr">
This is my first Rounderd Coruner built.and we can add more word or code or script in
between them it will expands the height of the cell or column.
</div></div></div></div>
<div class="clear"> </div>
</body>
</html>
and save the following file as “roundcorner.html” it result as follows: 
