CSS3 Borders

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

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

---

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:

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