Border-image generator

The In Case of Stairs website provides an on-line code generator for border-image. Based on the loaded image, a preview and CCS3 border-image properties with different parameters are created. You can visually select indents and sizes on the fly.
For those who do not know about border-image, I recommend reading a wonderful article by John Risig (John Resig), the creator of jQuery.

Below is a demonstration code that uses the CSS property generated by this service.
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > Border-image </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< style >
#bb{
border-width: 65px 45px 58px 39px;
-moz-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
-webkit-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
}
</ style >
</ head >
< body >
< div id ="bb" >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar adipiscing sapien, vel semper diam pulvinar vitae. Nulla ipsum lorem, lacinia eu commodo semper, posuere sit amet arcu. Ut consequat adipiscing lorem sed pulvinar. Aliquam enim sapien, volutpat at dignissim quis, sodales sed nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </ p >
</ div >

</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .


<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > Border-image </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< style >
#bb{
border-width: 65px 45px 58px 39px;
-moz-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
-webkit-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
}
</ style >
</ head >
< body >
< div id ="bb" >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar adipiscing sapien, vel semper diam pulvinar vitae. Nulla ipsum lorem, lacinia eu commodo semper, posuere sit amet arcu. Ut consequat adipiscing lorem sed pulvinar. Aliquam enim sapien, volutpat at dignissim quis, sodales sed nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </ p >
</ div >

</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .


<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > Border-image </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< style >
#bb{
border-width: 65px 45px 58px 39px;
-moz-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
-webkit-border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
border-image: url(http://www.picamatic.com/show/2010/04/06/03/38/6568488_274x257.png) 65 45 58 39;
}
</ style >
</ head >
< body >
< div id ="bb" >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar adipiscing sapien, vel semper diam pulvinar vitae. Nulla ipsum lorem, lacinia eu commodo semper, posuere sit amet arcu. Ut consequat adipiscing lorem sed pulvinar. Aliquam enim sapien, volutpat at dignissim quis, sodales sed nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </ p >
</ div >

</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

Here you can see what happened.
Here is another example.

It is a pity that you can not change the background on which the preview and color of the displayed code is displayed.
Works fine in FireFox 3.6 in Opera 10.5 in Chrome. Doesn't work in IE