Webkit Border Image

I was reading through one of Mike Rundle’s excellent posts about his iPad app Digital Post where he describes in detail how he implemented the horizontal scrollbar he uses in the app.

One of the methods he uses to create the background is stretchableImageWithLeftCapWidth:topCapHeight:, which splits an image into several pieces and repeats others to create a nice, repeating background with special treatment on the edges.

With the work I did recently playing around with webkit scrollbars, I knew that -webkit-border-image worked very similarly and threw together a quick sample of how it could work:

This sample sets the “cap” width on both the right and left to 15px, but you could easily change that to whatever your image required. Here’s a working demonstration. I’ve only tested the WebKit implementation of border-image, so your milage may vary with Firefox’s implementation.

Posted by @mclaughj Tagged with #css3, #code, and #development.