CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.
It is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added. Some of the most important modules are:
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Multiple Column Layout
- User Interface
Its specification is still under development by W3C. However, many of the new properties have been implemented in modern browsers.
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 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.
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, create rounded corners with the border-radius property.