CSS3 Border
CSS3 Border
With CSS3, you can create rounded corners, add a shadow box, and as the image of the border without using design programs such as Photoshop.
In this chapter, you will learn the following border properties:
- border-radius
- box-shadow
- border-image
CSS3 rounded corners
Add fillets tricky in CSS2. We had to use a different image every corner.
In CSS3, it is very easy to create rounded corners.
In the CSS3 border-radius property is used to create rounded corners:
Examples
Add fillets in a div element:
{
border:2px solid;
border-radius:25px;
}
CSS3 box shadows
The CSS3 box-shadow property is used to add a shadow:
Examples
Add box-shadow property in the div
{
box-shadow: 10px 10px 5px #888888;
}
CSS3 border pictures
With the CSS3 border-image property, you can use an image to create a border:
Use pictures to create div border:
Examples
Use pictures to create a border 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 */
}
New Border Properties
Attributes | Explanation | CSS |
---|---|---|
border-image | Setting the border shorthand properties of all images. | 3 |
border-radius | One for setting all four border - * - radius shorthand property | 3 |
box-shadow | Attach one or more drop-down box shadows | 3 |