CSS3 Goodies:
Borders and Backgrounds

The latest WebKit builds now support three new CSS3 properties fully and one partially.

border-image — WebKit now fully supports the CSS3 border-image property. This property allows you to slice an image into nine pieces (the corners, sides, and center) and use these images to render the border of a box. You can stretch, tile or round the sides and middle. WebKit can also even handle border-image on inline flows like spans and links.

background-clip — Background-clip is a new property that lets you clip the background to the border, content or padding box. WebKit supports this new property as part of the background shorthand as well. This property works with multiple backgrounds also.

background-origin — The background-origin property lets you control where the origin of the background is as far as background-position is concerned. You can also choose the border, padding or content boxes. Like background-clip it can be specified in the background shorthand and works with multiple backgrounds.

border-radius — WebKit now supports border-radius for transparent borders. When used with transparent borders, both the background and border images will render with a rounded clip rect applied, so you can make rounded boxes now with a border-image or with background images. Support for other border types will be coming soon.

With these changes WebKit actually now supports a majority of the CSS3 Borders and Backgrounds draft. Only a few properties remain.