CSS3 border example tutorial

CSS3 Borders

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

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

border-radius

box-shadow

border-image

Browser support

Properties

Browser support

Internet Explorer 9+ supports border-radius and box-shadow.

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

Note: Safari with the prefix -webkit- supports shadow borders.

Opera with the prefix -o- supports border images.

CSS3 Rounded Corners

Adding rounded corners in CSS2 is tricky. We had 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 rounded corners:

This is a rounded border!

Example

Add rounded elements to a div:

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

CSS3 box shadow

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

Example

Add box-shadow attribute in div

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

CSS3 borderPicture

With CSS3 border-image Property, you can create a border using an image:

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

Create a border using an image in a div:

Example

Create a border using 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 */
}

[Related recommendations]

1. Special recommendation:"php Programmer Toolbox" V0.1 version download

2. Free css online video tutorial

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of CSS3 border example tutorial. For more information, please follow other related articles on the PHP Chinese website!