Release often, release early: borderImage.

Today I have commited the version 1.0a1 of jquery.borderImage to it’s github repository.

jquery.borderImage is a partial, cross-browser implementation of CSS3′s borderImage property, as described in the CSS3 draft proposal. It only allows to stretch slices of your image but neither to repeat it nor to round it. Anyway this is already great as it works in firefox2+, opera9+, safari3+ and IE6+!

It uses either the vendor specific implementation of the property (firefox3.1, recent webkit), canvas (firefox2/3, opera) or vml (IE).

There is few bugs in IE6, especially when using images with transparency, and IE8b2 has a major regression preventing to dynamically create vml elements (see related bug on microsoft connect). The only workaround is to use the IE7 meta-tag.

I am working on detailed explanations and “how to“s for the plugin but during this post I will assume you already know how fantastic it is, what is the syntax of the property and that you are familiar with jQuery.

  1. Make sure your element actually has border:
    #element { border: 10px solid transparent; }
  2. Draw your image
  3. Describe how you would have sliced it, with the following syntax:
    $(‘#element’).borderImage(‘url(“border.png”) 20′);

This is exactly the kind of code used to produce the border of this page. It’s not only perfect to create any kind of borders around elements, but it can also emulate rounded-corners, stretching background images as well as tabs and buttons adjusted to their contents.

Their is already built-in features to make use of images with gradient and creation of multi-state tabs/buttons a lot easier. More about that later, I need some rest.

Get the code, test it, report bugs/enhancements, port it to other popular libraries, enjoy!

5 thoughts on “Release often, release early: borderImage.

  1. Abi

    Hey, I love this solution and I’m using it for my latest project. One minor annoyance is that the existing rounded corners generators can’t be used to create the border image (is there?).

Comments are closed.