This post originated from an RSS feed registered with Web Buzz by Lee v. Original Post: CSS3 Border properties Feed Title: IT Jungles Feed URL: http://www.itjungles.com/rss Feed Description: Learn all tech stuff at ITJungles.com Latest Web Buzz Posts Latest Web Buzz Posts by Lee v Latest Posts From IT Jungles

In CSS 1, CSS 2, each time you want to create a rounded way button, create shadows for the box .. ect, you first have to design in Photoshop or other design software and use an image as a border

With CSS3, you can create them in easy way !

In this lesson today you will learn about the following border properties:

• border-radius

• border-image

• box-shadow

Note:

Internet Explorer 9 supports some of the new border properties.

Opera supports 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.

I. CSS3 Rounded Corners

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

Example:

.itjungles{

border:3px solid;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */

}

Result:

II. CSS3 Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes

Example:

.itjungles{

-moz-box-shadow: 5px 10px 10px #333; /* Firefox 3.6 and earlier */
-webkit-box-shadow: 10px 10px 5px #333; /* Safari */

}

Result:

III. CSS3 Border Image

In  CSS3 border-image property you can use an image to create a border

Example:

Itjungles{

-moz-border-image: url('/border.png') 20 20 round; /* Firefox */

-webkit-border-image: url('/border.png') 20 20 round; /* Safari and Chrome */

border-image: url('/border.png') 20 20 round;

}

Result:

The original image

Did you like this tip? {fblike}

Now, are you ready to learn and pratice with CSS3? Let's enjoy it