您可以狠狠地点击这里：实例demo3
上图我圈了四个边角，不难发现，这一个边角处的菱形都是被截掉的。这就是repeat的效果，还记得上面的毛坯房的例子吗？round会压缩（或伸展）图片大小使其正好在区域内显示，而repeat是不管三七二十一直接重复的，而且是居中重复，repeat从中间开始（这是我的观察，可能不准确）。
这里还有一点需要注意：在webkit核心的浏览器下这个round属性和repeat属性似乎没有没有区分，显示的效果是一样的，所以您在chrome浏览器或是Safari浏览器下看demo2和demo3的效果可能是一样的。Firefox3.5下可以准确区分这两个参数。
4、上实例样式缩写
上面的实例还可以进一步缩写。CSS如下：
.border_image{
width:400px;
height:100px;
-moz-border-image:url(../image/border.png) 27/1em repeat;
-webkit-border-image:url(../image/border.png) 27/1em repeat;
border:double orange 1em;
}
实现的效果是一样的。您可以狠狠地点击这里：实例demo4
border-image绘制原理简述
我是这样理解的：共存在两个九宫格，一个是边框图片，还有一个就是边框本身，九个方位关系一一对应。边框本身的特性让其变成了一个九宫格，四条边框交错，加上其围住的区域，正好形成一个九宫格。边框图片则是通过图片剪裁实现了九宫格。这是理解绘制原理的基础。
1、调用边框图片
border-image的url属性，通过相对或绝对路径链接图片。
2、边框图片的剪裁
border-image的数值参数剪裁边框图片，形成九宫格。
3、剪裁图片填充边框
边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。
4、执行重复属性
被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。
5、完成绘制，实现效果
绘制原理动画示意，本flash动画以第一个demo效果做示例，请点击其中的“下一步”按钮，可看到一步一步的演示：
四、border-image的一些应用
自适应的圆角效果
使用图片如下：
此图片的剪裁宽度为20像素，基本上就是此图的圆角大小。div的边框宽度为10像素，其CSS核心样式如下：
.border_image{
-moz-border-image:url(../image/rounded_corner.png) 20/10px;
