CSS3 BORDERS

With CSS3 we can create boxes with rounded borders, shaded boxes and also use a picture as the edge of a box

CSS3 Rounded Corners

The property border-radius is used to create rounded borders.

Example:

border-radius:30px;

CSS3

div { border:1px solid black; padding:5px 20px; background:lightgrey; width:200px; border-radius:30px; }

HTML:

<div>Element with rounded corners</div>

This is the result

CSS3 Box Shadow

The property box-shadow is used to create a shadow box or item

box-shadow: 8px 8px 3px grey;

CSS3

div { width:100px; height:50px; background-color:lightgreen; box-shadow: 8px 8px 3px grey; }

HTML

<div> SHADOW </div>

This is the result

CSS3 Border Image

The property border-image can use an image "image.png" to create a border

CSS3

div { border-image:url(image.PNG) 20 20 round; -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari, Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }

HTML

<div> Border Image </div>