CSS3 Tutorial | CSS3 Borders | CSS3 Rounded Corners | CSS3 Box Shadow | New Border Properties

CSS3 Tutorial | CSS3 Borders | CSS3 Rounded Corners | CSS3 Box Shadow | New Border Properties

CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.


In this chapter you will learn about the following border properties:

border-radius
box-shadow
border-image

CSS3 Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.


In CSS3, creating rounded corners is easy.

In CSS3, the border-radius property is used to create rounded corners:
Example:
Add rounded corners to a div element:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

CSS3 Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes:

Example:
Add a box-shadow to a div element:

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 Border Image

With the CSS3 border-image property you can use an image to create a border:

Example:
Use an image to create a border around a div element:

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

New Border Properties

Property	Description	CSS
border-image	A shorthand property for setting all the border-image-* properties	3
border-radius	A shorthand property for setting all the four border-*-radius properties	3
box-shadow	Attaches one or more drop-shadows to the box	3