CSS3 Borders

In this chapter we will learn about some new border property introduced in css3, like border-radius, box-shadow and border-image. border-image will not work in IE9 but other 2 will work in IE+ and other latest browsers..

Rounded Corners in CSS3

The border-radius property is used to create rounded corners in CSS3.

.myDiv {
border:1px solid #007de1;
border-radius:15px;
} 

Box Shadow in CSS3

This property is used to add shadow to a box in CSS3.

.myDiv {
box-shadow: 10px 10px 5px #333333;
} 

Border Image in CSS3 [ Will not work in IE ]

Apart from color you can also use background image in CSS3.

.myDiv {
border-image:url(border.gif) 20 20 round;
-webkit-border-image:url(border.gif) 20 20 round; /* For Safari 5 and older */
-o-border-image:url(border.gif) 20 20 round; /* For Opera */
}