CSS3 Border Example Tutorial

CSS3 border

With CSS3, you can create rounded borders, add shaded frames, and act as a boundary 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

Browser support

Property

Browser support

Internet Explorer + + supports Border-radius and Box-shadow.

Firefox, Chrome, and Safari support all the latest border properties.

Note: The prefix is-webkit-for safari support for shaded borders.

The prefix is-o-'s opera support border image.

CSS3 rounded Corners

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

In CSS3, it is easy to create rounded corners.

In CSS3, the Border-radius property is used to create fillets:

This is a rounded border!

Instance

To add a fillet element to the div:

DIV{BORDER:2PX solid;border-radius:25px;}

CSS3 Box Shadow

The Box-shadow attribute in CSS3 is used to add a shadow:

Instance

Add the Box-shadow property to the Div

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

CSS3 Border Picture

With the CSS3 Border-image property, you can create a border with an image:

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

Use a picture to create a border in a div:

Instance

Create a border with a picture in a div

Div{border-image:url (border.png) Round;-webkit-border-image:url (border.png) and round;/* Safari 5 and older */-o- Border-image:url (border.png) round; /* Opera */}

"Recommended"

1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Free CSS Online video tutorial

3. php.cn Lonely Nine-base (2)-css video tutorial