css3 property border-radius

W3C has offered some new options for borders in CSS3, of which one is border-radius. We can now create rounded corners for our elements, just like the ones below.

border-radius can have two values, the first is the horizontal and the second is the vertical radius

border-radius: 55px 25px;

To use the shorthand and define all four corners with horizontal and vertical radii:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;

diagram showing corner radius with different horizontal and vertical values

border-radius is the shorthand
border-radius: 55px 25px;

Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. 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:

.box {
  background-color: #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #000; 
  padding: 10px;
  }

The different corners can also each be handled on their own. Note: older Mozilla proprietary property names are slightly different, as it has
-moz-border-radius-topright: as opposed to
-webkit-border-top-right-radius
: and
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:

Browser compatibilty

http://www.css3.info/modules/compatibility-table-backgrounds-and-borders-module/

The border-radius property is supported by Firefox (since version 3.0), Safari (since version 3.1) and Chrome (since the first version), but it’s not supported by Internet Explorer or Opera (it should be implemented in Opera 10).

Tutorials:

based on: http://www.css3.info/preview/rounded-border/

http://www.bloggingcss.com/en/tutorials/the-css3-border-radius-property/

Examples:

http://sam.brown.tc/