How to use CSS3 border properties ?

CSS3 border property helps us to create rounded corners, allow us to give shadow to an element and images to a border. In short it helps us to design a stylish container for our content.
In this tutorial we will discuss the following border properties:
1. border-radius
2. box-shadow
3. border-image
border-radius: This property allows web designers to create rounded corners for the divs.

   		div{
			border:3px solid #666666;
			padding:10px auto; 
			background:#73C22D;
			width:350px;
			border-radius:30px;
			}

Browser support: This property is compatible with all modern browsers. But to maintain compatibility with old browser it is suggested to add prefix -moz- for mozilla, -webkit- for safari.and -o- for opera.
box-shadow: This property allows web designers to attach a shadow to an element.
1. The first value represents the horizontal offset of the shadow (x-axis). If the value is positive the shadow is drawn to the right side of the element, If negative the shadow is drawn to the left of the element.
2. The second value represents the vertical offset of the shadow (y-axis). If the value is positive the shadow is drawn below the element, if negative it is drawn above.
3. The third value (optional) represents the blur radius. This value defines how big and how much blurred the shadow is. The larger the value, the more the shadow’s edge is blurred. Negative values are not allowed.
4. The fourth value (optional) represents the spread distance of the shadow. Positive value expands the shadow in all directions while a negative value shrink the shadow.
5. This value (optional) allows designers to set the color of an element.
6. The keyword inset (optional) is used to define the outer and inner box-shadows.

   		div{
			border:3px solid #a1a1a1;
			padding:10px auto; 
			background:#ccc;
			width:350px;
			box-shadow: 5px 5px 8px 10px #666666 inset;
			}

box-shadow: 10px 10px 5px 5px #666666;
box-shadow: 10px 10px 15px 5px #666666 inset;
Browser support: IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.
This property is compatible with all modern browsers. But to maintain compatibility with old browser it is suggested to add prefix -moz- for mozilla, -webkit- for safari.and -o- for opera.
border-image: With the help of this property images can be assigned to a border based on a single image file.
border-image: url(phpmind-border-image-eg.png) 30 30 round;

   		div{
			background: #FF6;
			padding: 10px 5px;
			width: 450px;
			border:20px solid transparent;
			border-image: url(phpmind-border-image-eg.png) 30 30 round;
			}

Image which is used
Browser support: Firefox, Chrome, and Safari 6. Use -webkit- as a prefix while working on safari 5 or its older versions. -o- as a prefix while working on opera.