CSS Rounded Corners Without Images

Roundness look good than the sharp edges, also it gives a sleek look, in web applications we normally make round images with the help of images, which is a tough task in making images and adjusting them too, in this tutorial we will make round corners with the help of CSS and also without CSS3, the concept is to make layers of line of different lengths pile up on each other to give a feeling of roundness.

.layer1 , .layer2 , .layer3 , .layer4{
font-size:1px;
overflow:hidden; 
display:block;
height:1px;
background:#EEEEEE;
}
.layer1{
margin:0 1px;
}
.layer2{
margin:0 2px;
}
.layer3{
margin:0 3px;
}
.layer4{
margin:0 5px;
}

only thing in this CSS is background:#EEEEEE; assign color to it whatever you want, to use it simple use the classes i.e.

 
Please Authenticate Yourself !
 
 
Pass Pharse : 
 
 
 
 

this combination of <b> in the above example give you the upper round corners of the table if you want lower round corners too just simply reverse the order of the divs, when you apply this you will get result similar as shown in images.