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 ¶