Browser Support 

• Internet Explorer 9 supports two of the new border properties. 
• Firefox requires the prefix -moz- for border-image. 
• Chrome and Safari requires the prefix -webkit- for border-image. 
•  Opera requires the prefix -o- for border-image. 
• Opera supports the new border properties. 

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.
In CSS3, the border-radius property is used to create rounded corners:

Example
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
} 

CSS3 Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes:

Example
div
{
box-shadow: 10px 10px 5px #888888;
} 

- the first 10px refers the "x" coordinates from left of the div
- the second 10px refers the "y" coordinates from top of the div
- the 5px is the shadow spread
- the #888888 is the shadow color  

CSS3 Border Image

With the CSS3 border-image property you can use an image to create a border:

 The original image used to create the border above:








Example
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}