CSS3 Borders

With CSS3, you can create rounded borders, add shadow borders, and use images as borders without relying on 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, it's easy to create rounded corners.

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

This is a rounded border!

Example

Adding 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 a box shadow to a div element:

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

CSS3 Border Images

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

The border-image property allows you to specify an image as a border! The original image used for creating the border above:

Creating a border using an image in a div:

CSS3 Borders

Example
Create a border using an image within a div:

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

Properties	Description	CSS
border-image	Shorthand property for setting images for all borders.	3
border-radius	Shorthand property for setting all four border-radius properties.	3
box-shadow	Attach one or more drop shadows to an element.	3