how to create rounded corners using css

CSS tutorial, how to create rounded corners using css. We always need the rounded corners for our various web projects. W3C has offered borders in CSS3.

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function.

how to create rounded corners using css

There are many javascripts are available to create the rounded corner using scripts. But specially recommend use pur css to avoid unnecessary script loading. So many sites uses the background image also, We need to avoid that also.

Following css will give you the rounded corners using only css:

.main_container {background:#ccc; color:#fff; margin:0 15px;}
.wordpressapitop, .wordpressapibottom{
display:block;
background:#fff;
}
.wordpressapitop *, .wordpressapibottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.wordpressapi1{margin: 0 5px}
.wordpressapi2{margin: 0 3px}
.wordpressapi3{margin: 0 2px}
.wordpressapi4{
margin: 0 1px;
height: 2px
}

Use following code in your html file and you are able to use rounded corners without using the javascript

Above script will work on all browsers FF, Chrome, Safari, IE6, IE7, IE8.