CSS3 Borders
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:
- border-radius
- box-shadow
- border-image
Browser Support
| Property | Browser Support | ||||
|---|---|---|---|---|---|
| border-radius | |||||
| box-shadow | |||||
| border-image | |||||
Internet Explorer 9 supports two of the new border properties.
Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Opera requires the prefix -o- for border-image.
Opera supports the new border properties.
CSS3 Rounded Corners
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:
This box has rounded corners!
Example
Add rounded corners to a div element:
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
CSS3 Box Shadow
In CSS3, the box-shadow property is used to add shadow to boxes:
Example
Add a box-shadow to a div element:
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
CSS3 Border Image
With the CSS3 border-image property you can use an image to create a border:
The border-image property allows you to specify an image as a border!
The original image used to create the border above:
Example
Use an image to create a border around a div element:
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
New Border Properties
| 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 |
