Playing With border-radius and box-shadow

The border-radius property in CSS3 is used to add rounded corners to most HTML elements with a couple of lines (eventually one line!) of CSS. This page has some examples of border-radius for you to see how to use it and what effects you can achieve from adding it. Just remember that it is not supported in any version of IE yet (IE9, possibly) and requires vendor specific prefixes for Mozilla and Webkit.

Just Border Radius

Border radius and box shadow

Border radius and inset box shadow

Note that the box-shadow matches the background, a very nice effect!

Using Two Values

This has two values applied to it with modified values to make it look better

Dark Example

This box looks a little more pronounced and better shows the effect of an inset border that matches the background