How Does CSS3 Borders work?

We can do the following things with CSS3 Border style properties

1. creating rounded borders
2. adding shadow to boxes
3. using an image as a border

The CSS3 Border style properties are..

1. border-radius
2. box-shadow
3. border-image

The latest versions of IE, Firefox, Chrome, Safari and Opera supports the following two CSS3 Border style properties

1. border-radius
2. box-shadow

IE does not support the "border-image" property. But all the other browsers support the same with some prefix.

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.

Example for box-shadow

.test{
width:200px;
height:100px;
background-color:blue;
box-shadow: 10px 10px 5px #676767;
}

After applying it to a div, it look like as follows

Example for border-radius

.test
{
border:2px solid;
border-radius:25px;
background-color:red;
/* Firefox 3.6 and earlier */
-moz-border-radius:25px;
}

After applying it to a div, it look like as follows


Example for border-image
This has two examples one with option "round" other one with option "stretch", you can copy this play by applying it to some div, to see the immediate output.

#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 */
border-image:url(border.png) 30 30 round;
}

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

CSS3 Mian Page