Grokking CSS3 border-image

A demo by Nora Brown Design.

The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling. First I tried a big matrix with all kinds of permutations, then I thought (inspired by the work of Chris Coyier) "Hey why not JQuery this thing up and make it intereactive?". So here is my attempt. And thanks to Chris for allowing me to post a companion article on css-tricks.

Choose your image, border-width, repeat value, slice percentage, and check in various browsers.

Notes on border-image

• Chrome and Safari make no distinction between round and repeat, while Firefox and Opera (sorry my slider doesn't work quite right in Opera) get it right. Compare and contrast.
• When the slice is set to 50%, you effectively have an empty middle slice, so you only get corners.
• All browser seem to have "fill" turned on by default, though to me the spec says to do the opposite.
• Browsers seem only to have implemented the shorthand border-image property, rather than all the individual properties, making the CSS for this example a disaster of repetition!