CSS3 Borders

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 Post you will learn about the following border properties:
border-radius
box-shadow
border-image
Browser Support
Internet Explorer 9 supports some 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.

Safari also needs the prefix -webkit- for box-shadow.

Opera supports the new border properties.

CSS3 Rounded Corners
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
CSS3 Box Shadow
div
{
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
}
CSS3 Border Image
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 */
}