Rounded Corners and Borders in CSS 3

Posted 20110619. Last Updated 20110619.

Theres two neat properties introduced in CSS 3 that Im really fond of: border-radius and box-shadow. border-radius creates curved or rounded corners of divs and box-shadow creates everything from drop shadows to faded borders.

border-radius
The syntax for border-radius is:
border-radius length height

An example is:
border-radius: 10px 10px;

The default use affects all 4 corners. You can specify individual corners by changing border-radius to one of the following:
border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.


box-shadow
box-shadow has many syntaxes, but I will show 2 common uses.

To create a faded border, 6 pixels wide and colored #333333:
box-shadow: 0 0 6px 6px #333333;

To create a drop shadow, 4 pixels wide and colored #333333:
box-shadow: 4px 4px #333333;

box-shadow has many other uses, like insetted borders and multiple colors. A great site to check out is http://www.css3.info/preview/box-shadow/