CSS3 has introduced new border attributes through which you can create rounded borders, shadows and border images without using software like photoshop, etc.

CSS3 Border Radius

Before CSS3 release, creating rounded corner is very hard, separate images are used for each corner to achieve the effects of rounded corner.

With the help of CSS3, creating rounded corner is very easy.

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

CSS3 Box Shadow

With CSS3 shadow effects can be applied easily with out the use of software like photoshop, etc.

Shadow effects are applied using box-shadow property like shown below.

Border Image

In CSS3, border-image property is used to create a border using image.

Unlike border-radius and box-shadow, border-image is very tricky.

CSS3 Borders Example

	   
<div style="border:3px solid; 
		border-radius:25px; 
		height:50px">
</div>	

<div style="border:1px solid; 
		box-shadow:5px 5px 5px #888777; 
		height:50px">
</div>

<div style="border-style: solid; 
border-width: 27px; 
-moz-border-image: url(img/border.PNG) 27 round; 
-webkit-border-image: url(img/border.PNG) 27 round; 
-o-border-image: url(img/border.PNG) 27 round; 
border-image: url(img/border.PNG) 27 fill round;">
</div>

		

Next Lesson > CSS3 Background