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 some of the new border properties.
Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Safari also needs the prefix -webkit- for box-shadow.
Opera supports the new border properties.

---

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;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

CSS3 Borders

« Previous

Next Chapter »

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 some of the new border properties.
Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Safari also needs the prefix -webkit- for box-shadow.
Opera supports the new border properties.

---

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; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ } 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;
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
}

CSS3 Borders

« Previous

Next Chapter »

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 some of the new border properties.
Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Safari also needs the prefix -webkit- for box-shadow.
Opera supports the new border properties.

---

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; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ } 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; -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */ } 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;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
}

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