border-image in Firefox

For the upcoming Firefox 3.1 release a lot of work has been going into improving its CSS support (specifically, in relation to the CSS 3 specification).

One areas that have received solid implementations is that of border-image. This is a new CSS 3 module that makes the exact slicing of images (and their positioning around an element) quite easy.

The most obvious use case for them exists in constructing beautiful scalable buttons. And there is, perhaps, no better use case than the one provided by the iui library: replicating portions of the iPhone user interface in a pure-CSS manner.

Here are two examples from the iui library (slightly tweaked to support both WebKit’s and Mozilla’s implementations of border-image).

You will need a nightly release of Firefox in order to have the following demos work properly.

The button on the top right (“Search”) is mostly implemented using the following CSS:

border-width: 0 5 0 5;
-webkit-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
-moz-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;

With toolButton.png looking like:

The premise behind border-image is complex, but easy to learn. When used in the manner shown above you are, effectively, providing slice offsets into the provided image – telling the browser how to position the slices.

For example the 5s in the border-width and border-image indicate that there should be a 5px-wide border on the left and right of the button. The contents of the border should be populated with the left and right-most 5 pixels from toolButton.png. Since a horizontal border width value is provided it is possible to scale the contents of the button horizontally (inserting more contents will allow it to continue to work properly).

The 0s, on the other hand, indicate that entirety of the button background should be consumed by toolButton.png – and that none of it should be used to show the border (border-image can be used as a crude mechanism for injecting background images). Because of this the image won’t be able to gracefully scale vertically.

CSS3.info provides another example that shows how the stretching and rounding work.

with the following base image:

Rounding:

Stretching:

By tweaking the stretching of the border-image you can end up with some truly-compelling results.

We can see another one in a second iui button:

With the following CSS being used:

-webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;

together with this base image:

border-image has a large number of compelling use cases. It’s fantastic to see some coordinated efforts by browser vendors to make their implementations common-place.

Posted: August 13th, 2008


Subscribe for email updates

21 Comments (Show Comments)



Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.