8.4. CSS3 border

8.4.1. CSS3 border ¶

With CSS3, you can create rounded borders, add shadow boxes, and act as a border image 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

8.4.2. CSS3 fillet ¶

Adding rounded corners to CSS2 is tricky. We have to use different images in every corner.

In CSS3, it is easy to create fillets.

In CSS3 border-radius properties are used to create fillets:

This is a rounded border!

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

8.4.3. CSS3 box shadow ¶

In CSS3 box-shadow property is used to add shadows:

Example

In div add in box-shadow attribute

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

8.4.4. CSS3 border picture ¶

With CSS3 border-image property, you can use the image to create a border:

border-image property allows you to specify a picture as a border! The original image used to create the border above:

In div use the picture to create a border in:

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

8.4.5. New Border Properties ¶