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 some of the new border properties.
Firefox requires the prefix -moz-.
Chrome and Safari support the border-radius property, but require the prefix -webkit- for box-shadow and border-image.
Opera supports the new border properties.
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!
Round Corner Example
Add rounded corners to a div element:
div
{
border:2px solid;
border-radius:25px;
}
In CSS3, the box-shadow property is used to add shadow to boxes:
This box has shadow borders!
Example
Add a box-shadow to a div element:
div
{
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
box-shadow: 10px 10px 5px #888888;
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
{
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
border-image:url(border.png) 30 30 round;
}
