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:
This is rounded borders!
CSS3 box shadows
The CSS3 box-shadow property is used to add a shadow:
CSS3 border pictures
With the CSS3 border-image property, you can use an image to create a border:
border-image property allows you to specify an image as a border! Used to create the border above the original image:
Use pictures to create div border:
Examples
Use pictures to create a border 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 */
}
{
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 */
}
try it"
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 |