border-image in Firefox 3.1 – CSS 3

John Resig posted about the upcoming improvements in Firefox 3.1 CSS support. 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. Now you can create the iPhone search button that iUI contains, using the simple 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;

Here you see the reusable button from the iui library (slightly tweaked to support both WebKit's and Mozilla's implementations of border-image).