CSS3
CSS3 is completely backwards
compatible, so you will not have to change existing designs. Browsers will always support CSS2.
CSS3 Modules
CSS3 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 CSS3 modules are:
- Selectors
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
CSS3 Recommendation
The CSS3 specification is still under development by W3C.However, many of the new CSS3 properties have been implemented in modern browsers.
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
Browser Support
Property | Browser Support | ||||
---|---|---|---|---|---|
border-radius | |||||
box-shadow | |||||
border-image |
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.
In CSS3, the border-radius property is used to create rounded corners: