How to make rounded corner div using css

In many sites we found rounded corner divs without using images. We can make it in simple way using css. But it will not work in IE up to IE 8. We can use this css on everything, like table, text inputs, buttons, images, etc.

for deferent browsers, the css are,

IE9+ = border-radius: Value;

Mozilla Firefox = -moz-border-radius: Value;

Opera = -o-border-radius: Value;

Crome, safari = -webkit-border-radius: Value;

Konqueror = -khtml-border-radius: Value;

Radius value 10px.

Here is the example for radius value 10px applied for a div

here is the css

[css]
#rounded-corner-div {
width:300px;
padding:15px;
background-color:#FFCA95;
border:1px solid #FF9900;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-o-border-radius:10px;
}
[/css]

Radius Value 10px 30px 10px 30px

Here is the example for radius value 10px 30px 10px 30px

css

[css]
#rounded-corner-div {
width:300px;
padding:15px;
background-color:#FFCA95;
border:1px solid #FF9900;
border-radius:10px 30px 10px 30px;
-moz-border-radius:10px 30px 10px 30px;
-webkit-border-radius:10px 30px 10px 30px;
-o-border-radius:10px 30px 10px 30px;
-khtml-border-radius:10px 30px 10px 30px;
}
[/css]

Here radius: 10px 30px 10px 30px = radius: topleft topright bottomright bottom left

— Enjoy

[ad#post]