CSS3 Border

CSS3 Border

With CSS3, you can create rounded borders, add shadow boxes, and use images as borders without needing design programs 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 was tricky in CSS2. We had to use different images for each corner.

In CSS3, creating rounded corners is easy.

The border-radius property in CSS3 is used to create rounded corners:

Example

Add rounded corners to a div element:

div {
    border: 2px solid;
    border-radius: 25px;
}

CSS3 Box Shadow

The box-shadow property in CSS3 is used to add shadows:

Example

Add the box-shadow property to a div element:

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

CSS3 Border Image

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

Create a border using an image in a div element:

Example

Create a border using an image in a div element:

div {
    border-image: url(border.png) 30 30 round;
    -webkit-border-image: url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image: url(border.png) 30 30 round; /* Opera */
}

New Border Properties