CSS3 Borders

CSS3 lets you do some really cool things with borders that were only previously possible with lots of ugly, hard-to-maintain code hacks.

In this section we’ll look at two examples: box shadows and rounded corners.

Create Box Shadows

The box-shadow property lets you add drop shadows to your page’s box elements. As this Table shows, you can separately specify values for color, size, blur, and offset:

Here’s an example using a 10px-wide shadow heading down and to the right, blurred across its full width, and colored mid-grey:

#div1 {
background-color: #8080ff;
width: 400px;
height: 250px;
box-shadow: 10px 10px 10px #808080;
-webkit-box-shadow: 10px 10px 10px #808080;
-moz-box-shadow: 10px 10px 10px #808080;
}                 
                 

In below snapshot you can see an example of this style applied to a <div> element in a web page.

Rounding Corners with the border-radius property

The border-radius property lets you add rounded corners to your page elements without the need for specially created corner images, and is perhaps one of the most popular features new to CSS3.

The border-radius property already has widespread browser support, though Mozilla Firefox required the -moz- prefix for a little longer than some of its rivals; therefore, if you need to support Firefox back several versions you should consider including the prefixed version too:

#div1 {
-moz-border-radius: 25px;
border-radius: 25px;
}                 
                 

Rounded corners can be specified independently using the individual properties border-bottom-left-radius, border-top-left-radius, borderbottom- right-radius, and border-bottom-right-radius, or for all four corners in one statement by using the border-radius property, as we’ve done here.