CSS3 Border
CSS3 border
With CSS3, you can create rounded borders, add shadow boxes, and border images without using a design program, such as 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 is tricky. We had to use a different image for each corner.
In CSS3, it's easy to create rounded corners.
In CSS3 the border-radius property is used to create rounded corners:
Example
Add a rounded corner element to the div:
div { border:2px solid; border-radius:25px; }
CSS3 box shadow
The box-shadow property in CSS3 is used to add shadows:
Example
Add box-shadow property to div
div { box-shadow: 10px 10px 5px #888888; }
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! Original image used to create the border above:
Use an image to create a border in a div:
Example
Create a border with an image in a 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 */ }
New border properties
Property | instruction | CSS |
---|---|---|
border-image | Sets the shorthand property for all border images. | 3 |
border-radius | A shorthand property for setting all four border-*-radius properties | 3 |
box-shadow | Shadows attached to one or more dropdown boxes | 3 |