With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.
In this chapter you will learn about the following border properties:
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| border-radius | 9.0 | 5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
| box-shadow | 9.0 | 10.0 4.0 -webkit- |
4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
| border-image | 11.0 | 16.0 4.0 -webkit- |
15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:
Add rounded corners to a <div> element:
In CSS3, the box-shadow property is used to add shadow to boxes:
Add a box-shadow to a <div> element:
With the CSS3 border-image property you can use an image to create a border:
The original image used to create the border above:
Use an image to create a border around a <div> element:
| Property | Description | CSS |
|---|---|---|
| border-image | A shorthand property for setting all the border-image-* properties | 3 |
| border-radius | A shorthand property for setting all the four border-*-radius properties | 3 |
| box-shadow | Attaches one or more drop-shadows to the box | 3 |
Your message has been sent to W3Schools.