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>