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:

01.main_container {background:#ccc; color:#fff; margin:0 15px;}
02.wordpressapitop, .wordpressapibottom{
03display:block;
04background:#fff;
05}
06.wordpressapitop *, .wordpressapibottom *{
07display: block;
08height: 1px;
09overflow: hidden;
10background:#ccc;
11}
12.wordpressapi1{margin: 0 5px}
13.wordpressapi2{margin: 0 3px}
14.wordpressapi3{margin: 0 2px}
15.wordpressapi4{
16margin: 0 1px;
17height: 2px
18}

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

How to create rounded corner using css

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

Published by

Purab

I am Purab from India, Software development is my profession and teaching is my passion. Programmers blog dedicated to the JAVA, Python, PHP, DevOps and Opensource Frameworks. Purab's Github Repo Youtube Chanel Video Tutorials Connect to on LinkedIn View all posts by Purab

One thought on “how to create rounded corners using css”

The sample you show have Gradiant background. The CSS in this example does not fit with the sample.