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 specifies the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

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

Try it yourself »

---

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

Try it yourself »

---

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 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera 10.5-12.1 */
border-image:url(border.png) 30 30 round;
}

Try it yourself »

---

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	3