How to use CSS3 borders?
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
Internet Explorer 9+ supports border-radius and box-shadow.
Firefox, Chrome, and Safari supports all of the new border properties.
Note: Safari 5, and older versions, requires the prefix -webkit- for border-image.
Opera supports border-radius and box-shadow, but requires the prefix -o- for border-image.
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.
div
{
border:2px solid;
border-radius:25px;
}
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:
{
box-shadow: 10px 10px 5px #888888;
}
CSS3 Border Image
With the CSS3 border-image property you can use an image 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 */
}
