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: 30px;
- -moz-border-radius: 30px;
- -webkit-border-radius: 30px;
Border radius and box shadow
- box-shadow: 0 0 20px #000;
- -moz-box-shadow: 0 0 20px #000;
- -webkit-box-shadow: 0 0 20px #000;
Border radius and inset box shadow
- box-shadow: inset 0 0 15px 15px #DDDDDD;
- -moz-box-shadow: inset 0 0 15px 15px #DDDDDD;
- -webkit-box-shadow: inset 0 0 15px 15px #DDDDDD;
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
- box-shadow: 0 0 10px 10px #000,inset 0 0 10px 10px #000;
- -moz-box-shadow: 0 0 10px 10px #000,inset 0 0 10px 10px #000;
- -webkit-box-shadow: 0 0 10px 10px #000,inset 0 0 10px 10px #000;
Dark Example
This box looks a little more pronounced and better shows the effect of an inset border that matches the background
- box-shadow: inset 0 0 10px 10px #DDDDDD
- -moz-box-shadow: inset 0 0 10px 10px #DDDDDD
- -webkit-box-shadow: inset 0 0 10px 10px #DDDDDD