CSS3 Border

CSS3 border

With CSS3, you can create rounded borders, add shadow boxes, and border images without using a design program, such as Photoshop.

In this chapter, you will learn about the following border properties:

• border-radius

• box-shadow

• border-image

CSS3 rounded corners

Adding rounded corners in CSS2 is tricky. We had to use a different image for each corner.

In CSS3, it's easy to create rounded corners.

In CSS3 the border-radius property is used to create rounded corners:

Example

Add a rounded corner element to the div:

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

 Try It! 

CSS3 box shadow

The box-shadow property in CSS3 is used to add shadows:

Example

Add box-shadow property to div

div
{
box-shadow: 10px 10px 5px #888888;
}

 Try It! 

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! Original image used to create the border above:

Use an image to create a border in a div:

Example

Create a border with an image in a div

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! 

New border properties