HTML and CSS Reference
Figure 13-11. FormView controls with rounded corners
The first FormView 's borders all have an equal radius of 25px, as specified in the border-radius
property. The second FormView has top corners with radii of 25px, 15px and bottom corners with radii of
50px, 40px respectively.
CSS3 lets you add shadows to boxes as well as text. The box-shadow and text-shadow properties control the
box shadow and text shadow, respectively. You can specify a horizontal offset, a vertical offset, a blur
amount, and a color for both types of shadows.
The following CSS rule uses the box-shadow and text-shadow properties just discussed:
border: 2px solid #071394;
border-radius: 25px 25px 25px 25px;
box-shadow: 5px 5px 5px #808080;
text-shadow: 2px 2px 2px #808080;
As you can see, box-shadow specifies horizontal and vertical offsets of 5px. A positive offset means the
shadow is dropped down and to the right with respect to the box, whereas a negative value means the
shadow is dropped up and to the left. The box-shadow property specifies the blur amount as 5px. The larger
the value, the more blurred the shadow is. Finally, the shadow color is specified as #808080 (grey).