Using webkit-border-image on the iPhone
One of the awesome, super-cool features of CSS 3 is the -webkit-border-image property. I finally understand how to use it, so I thought I would write a quick post about it so I wouldn't forget.
First, you have to make a PNG image that will divide properly into 9 images. You don't have to divide it yourself, the browser's CSS engine will do that for you, it does have to make sense, though.
A good example is the iPhone's bottombarclear.png. It is shaped like a rounded corner rectangle that has a nice alpha channel on it and a gradient. The straight part of the top and bottom are really short, probably only 20 pixels, if that.
The way to implement this is with the special webkit call, -webkit-border-image. If you are running Safari 3, or are on an iPhone, you will see that the div below is using a border-image.
If you aren't you probably won't see much of anything. The call I am using is:
In this case, the first 27 is the percentage of the image to cut around the corners. The / 27px indicates the width of the border.
I'm sure you can see the usefulness of this method. It really helps when you are trying to get your graphics just right on the iPhone.
I'd like to thank Vacuous Virtuoso for tipping me off on this to begin with.