border-image解释如下(摘自Tencent ISD webteam)

语法：border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

相关属性 ： border-image：border-top-image , border-right-image , border-bottom-image , border-left-image
　　　　　　border-corner-image：border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image

取值：none： 默认值。无背景图。
<image>： 使用绝对或相对 url 地址指定背景图像。
<number>： 边框宽度用固定像素值表示。
<percentage>： 边框宽度用百分比表示。
[ stretch | repeat | round ]： 拉伸 | 重复 | 平铺 (其中stretch是默认值。)

说明：使用图片作为对象的边界。
当table设置border-collapse为collapse无效。
 

在webkit中, 对应的实现属性是-webkit-border-image, gecko中对应则为-moz-border-image

border-image-generator是一个border-image属性的生成器, 来自Kevin Decker. 使用它我们可以很方便的生成border-image的应用效果.  近日Kevin Decker对其进行了更新, 使之支持本地文件访问, 具体请看博文border-image-generator: Local File Access.