CSS 3 Tutorial – Rounded Corner and Shadow Border effect

Previously we have seen the Transform Operations using CSS3. In this article i will depict the New Border Properties in CSS 3. With the help of CSS 3, we can perform following two operations on border :

1. Rounded Corner/ Border
2. Border Shadow

Live Demo – Click Here

1. Rounded Corner

Before CSS3, if you wanted to create the rounded corner border then it was not the straight job, it needed lots of programming stuff. There were alternatives like using sprite of images or jQuery plugins etc. However with the help of CSS 3 it is very straight as simple as shown below:

border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */

Using Border-radius property we can achieve the result. But for IE first line will work and for Mozilla 2nd line of code will work from above code snippet.

2. Border Shadow
If you want to give some shadow effect to the borders then its what everyone was waited for:

Syntax :

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: 5px 5px 10px #888888;