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:
Internet Explorer does not yet support 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:
Add rounded corners to a div element:
In CSS3, the box-shadow property is used to add shadow to boxes:
Add a box-shadow to a div element:
With the CSS3 border-image property you can use an image to create a border:
Use an image to create a border around a div element:
Your Query was successfully sent!