Adding shadows to elements is no longer the work of an image editor. The introduction of box-shadow into CSS3 means that you can add shadows with a little bit of CSS.
-webkit-box-shadow: 2px 2px 3px #CCCCCC
The first attribute is the vertical offset, the second is the horizontal offset, the third is the blur radius and the final attribute is the shadow colour.
This technique works really well with applying a border radius to the element too as outlined in the previous CSS3 tutorial.
First and foremost, before venturing into the world of CSS3. It is imperative that I mention browser support. As I am sure that you have guessed Internet Explorer is the culprit here. While IE 6 & 7 have absolutely no support for CSS3, IE8 does not support CSS3 except for some selectors and some properties that originated at Microsoft to begin with.
Curved Corners
<div style="background-color: #CC8800;
-moz-border-radius: 10px;
-webkit-border-radius: 11px;
border: 3px solid #000;
padding: 15px;">
Individual Curves
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;
To apply the same principle in Safari requires slightly different syntax:
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
That’s all there is to rounded corners using CSS3. It’s worth noting that border-radius is most effective with a lower value e.g 2px.
Discussions