Border-radius: create rounded corners with CSS!

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, which allows you to create round corners on box-items. One of the most talked about aspects of CSS3 is border-radius property. Rounder corners can be created independently using the four individual border-radius properties (border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius.) We can use border-radius shorthand property for all four corners simultaneously. It will take a single value for all the four corners.

This is an example:

Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

The code for this example above is actually quite simple:

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

These different corners can also each be handled on their own, Mozilla has other names for the feature than the spec says it should have though, as it has f.i. -moz-border-radius-topright as opposed to -webkit-border-top-right-radius:

Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.

These are handled by / should be handled by:

• -moz-border-radius-topleft / -webkit-border-top-left-radius
• -moz-border-radius-topright / -webkit-border-top-right-radius
• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Each border-corner properties will take either one or two values( it may a constant value or percentage).

See the example:
border-top-left-radius: 20px; // Single value
border-top-left-radius: 20px 30px; // taking separate values
border-top-left-radius: 5% 10%; // take percentage

The following diagram gives a graphical representation of the first 2 examples:

If one of the values is zero, the corner wont be rendered as rounded corner. It will be a squared one.

We can use border-radius shorthand property define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four constants or percentages.

Example:
border-radius: 4px 8px 2px 6px / 8px 4px 6px 2px;
border-radius: 10px;
border-radius: 10px 15px / 10px;

The first set of values define the horizontal radius for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radius for all four corners. If only one set of values are given; these are used to determine both the vertical and horizontal equally.

If all four values are given, these represent the top-left, top-right, bottom-right and bottom-left radius respectively. If bottom-left is omitted from the given set, its value is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is given it is used to set all four radii equally.

 

The -moz- prefix and -webkit- prefix

While Internet Explorer doesn't support many (or any) advanced CSS properties, you can get started using Firefox and any of the 'Mozilla' family of browsers. Apple's WebKit web browser engine also supports rounded corners making them available in the Safari and Chrome web browsers, the iPhone and other devices running WebKit.

Mozilla’s Firefox browser has supported the border-radius property, with the -moz- prefix, since version 1.0. However, it is only since version 3.5 that the browser has allowed elliptical corners.

 

Here are the CSS and browser-specific attributes

CSS3 Specification	Mozilla equivalent	WebKit equivalent
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

Some Examples