CSS3对元素边框进行了改进，可以将边框定义为图片。
属性名称：border-image
属性值：url(resources/images/border.png) 30 30 round;
其实border-image的属性值是一系列值得组合，w3cschool对其描述如下：
可能的值
| 值 | 描述 | 测试 |
|---|---|---|
| border-image-source | 用在边框的图片的路径。 | |
| border-image-slice | 图片边框向内偏移。 | |
| border-image-width | 图片边框的宽度。 | |
| border-image-outset | 边框图像区域超出边框的量。 | |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 | 测试 |
有一点需要注意，border-image-repeat属性的值分别是repeat，round，stretch；而不是上面说的repeated，rounded，stretched。
浏览器对border-image渲染方式有些难以理解，下面对w3cschool的例子进行了一下优化，可以更清晰的看到其图片边框处理方式。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
div {
border: 15px;
width: 300px;
height: 60px;
}
#round {
-moz-border-image: url(resources/images/border1.png) 30 30 round;
/* Old Firefox */
-webkit-border-image: url(resources/images/border1.png) 30 30 round;
/* Safari and Chrome */
-o-border-image: url(resources/images/border1.png) 30 30 round;
/* Opera */
border-image: url(resources/images/border1.png) 30 30 round;
}
#stretch {
-moz-border-image: url(resources/images/border1.png) 30 30 stretch;
/* Old Firefox */
-webkit-border-image: url(resources/images/border1.png) 30 30 stretch;
/* Safari and Chrome */
-o-border-image: url(resources/images/border1.png) 30 30 stretch;
/* Opera */
border-image: url(resources/images/border1.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round"></div>
<br>
<div id="stretch"></div>
<p>使用的图片：</p>
<img src="resources/images/border1.png">
</body>
</html>
具体效果如下图：
