CSS3 Draft/Borders & Backgrounds
The Cascading Style Sheets Level 3 module for borders and backgrounds has been published in draft form. As a draft, it has not yet been endorsed by the World Wide Web Consortium. However it includes some new functionality:
- “background-size” specifies the size of background images. You should be able to stretch or reduce the size of these images.
- Layer multiple background images.
- “border-style” has additional values: alternating dot-dash, two dots and a dash, and a wavy line.
- “border-image” specifies an image to use instead of the border styles.
- “border-radius” allows you to shape the corner of a border. If you use a background-image, it follows the curve of the border.
- “box-shadow” attaches one or more drop shadows to a box.
Of all the changes, the one I am most happy to see is border-radius. Creating rounded corners requires multiple graphics now (the central graphic and smaller graphics for each corner). This won’t fix all of the designs, but it will make most of them easier to create and maintain.