DIVs with Rounded Corners in CSS3

The border-radius CSS property can be used to render rounded corners on your DIV boxes. You can even customize the x and y-axis of each individual corner. Here are some self-explanatory examples on how to use the shortcode property and how to define each corner with border-*-*-radius.

HTML Example:

border-radius: 40px (shortcode)
border-top-right-radius: 40px (same on both axis)
border-top-right-radius: 20px 40px (x < y) 
border-top-right-radius: 40px 20px (x > y) 
 

CSS Example:

#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }
#boxShortcode {
background: cyan;
border-radius: 40px;
}
#box1 {
background: red;
border-top-right-radius: 40px;
}
#box2  {
background: yellow;
border-top-right-radius: 20px 40px;
}
#box3 {
background: lime;
border-top-right-radius: 40px 20px;
} 

Result:

Mozilla browsers prior to Firefox 3.5 need the -moz- prefix to render the eliptical corners (they do, however, support the rounded ones natively). The naming conventions also differ slightly from the W3C specifications -- you should use, for instance, -moz-border-radius-topright instead of border-top-right-radius.