SHARE THIS PAGE

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

Property	Browser Support
border-radius
box-shadow
border-image

Internet Explorer 9+ supports border-radius and box-shadow.

Firefox, Chrome, and Safari supports all of the new border properties.

Note: Safari 5, and older versions, requires the prefix -webkit- for border-image.

Opera supports border-radius and box-shadow, but requires the prefix -o- for 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:

This box has rounded corners!

Example

Add rounded corners to a div element:

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

Try it yourself »

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;
}

Try it yourself »

CSS3 Border Image

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
{
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 */
}

Try it yourself »

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