CSS3 borders

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
Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
IE
Chrome
Firebox
Safari
Opera
border-radius
9.0
5.0
4.0 -webkit-
4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5
box-shadow
9.0
10.0
4.0 -webkit-
4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5
border-image
11.0
16.0
4.0 -webkit-
15.0
3.5 -moz-
6.0
3.1 -webkit-
15.0
11.0 -o-
 

CSS3 The border-radius Property - 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:

This box has rounded corners!
 
Example

Add rounded corners to a <div> element:

div {
    border: 2px solid;
    border-radius: 25px;
}
CSS3 The box-shadow Property

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 The border-image Property

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

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

Example

Use an image to create a border around a <div> element:

div {
    -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 30 round;
}
CSS3 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