Creating Rounded corner using CSS

What is Rounded Corner?
 
Rounded corners in the first sense gives a site stunning and elegance look especially when there is rounded navigation menu The CSS border radius property will allow developers to use rounded corners in their design elements without the need of a rounded images or use of several elements to met the rounded design.

Even it was released since 2005 the border radius property has discrepancy with regards to browser compatibility especially with IE browsers.

Basic example:

This box should have rounded corners for Firefox, Safari/Chrome, Opera and IE9.

The code is:

<div style="border-radius: 15px;-moz-border-radius: 15px;background:#CCC000;">
 This box should have rounded corners for Firefox, Safari/Chrome, Opera and IE9.
</div>

The -moz-border-radius: 15px; tag is used for Mozilla Firefox.

Browser Support

Browser                                                                                 Support

Opera version 10.5 onward -------------------------------- border-*-radius
Chrome version 5 onward --------------------------------    border-*-radius

Safari and Chrome             -------------------------------- -webkit-border-*-radius

Mozilla Firefox uses          -------------------------------- - moz-border-*-radius

Internet Explorer 9 onward -------------------------------- border-*-radius


How it works?

Rounded corners work using individual borders property or simultaneously using the borders shorthand property.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius.

Individual Border Property

Example.

#sample{
border-top-left-radius: 15px;
border-bottom-right-radius: 10%;
border-top-right-radius: 10px;
}

Shorthand Property.

Example.

#sample{
border-radius: 15px
}