How to use CSS3 borders?
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border – without using a design program, like Photoshop.
In this chapter you will learn about the following border properties:
Internet Explorer 9+ supports border-radius and box-shadow.
Firefox, Chrome, and Safari supports all of the new border properties.
Note: Safari 5, and older versions, requires the prefix -webkit- for border-image.
Opera supports border-radius and box-shadow, but requires the prefix -o- for border-image.
CSS3 Rounded Corners
Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
CSS3 Box Shadow
In CSS3, the box-shadow property is used to add shadow to boxes:
Add a box-shadow to a div element:
box-shadow: 10px 10px 5px #888888;
CSS3 Border Image
With the CSS3 border-image property you can use an image to create a border:
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */