YouTipCss3 Borders
# CSS3 Borders
## CSS3 Borders
With CSS3, you can create rounded borders, add shadow boxes, and use images for borders without using design programs like Photoshop.
In this chapter, you will learn about the following border properties:
* border-radius
* box-shadow
* border-image
* * *
## CSS3 Rounded Corners
Adding rounded corners in CSS2 was difficult. We had to use different images for each corner.
In CSS3, it's easy to create rounded corners.
The border-radius property in CSS3 is used to create rounded corners:
This is a rounded border!
## Example
Add rounded corners to a div element:
div
{
border:2px solid;
border-radius:25px;
}
[Try it Yourself »](
* * *
## CSS3 Box Shadow
The box-shadow property in CSS3 is used to add shadows:
## Example
Add box-shadow property to a div element
div
{
box-shadow: 10px 10px 5px #888888;
}
[Try it Yourself »](
* * *
## 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:
Use an image to create a border in a div:
 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 Yourself »](
* * *
## New Border Properties
| Property | Description | CSS |
| :--- | :--- | :--- |
| ( | A shorthand property for setting all the border images. | 3 |
| ( | A shorthand property for setting all four border-*-radius properties | 3 |
| ( | Attach one or more drop shadows to the box | 3 |