CSS3为你提供了更多强大的属性来控制边框。其中最有趣的属性就是border-image了。它允许你将图片分成不同的部分并如你所愿地装饰在任何盒子的边缘。这听起来有些复杂，还是让我们先看一个简单的例子。为了演示border-image，首先创建一个简单的图形以便应用到边框上，如下图所示：

接下来我用一个灵活的方法将边框图片整齐地应用到一个大的盒子上（如下所示）。

.box {
	border-width:30px;
	border-style:solid;
	border-color:transparent;
	-moz-border-image:url(/uploadfile/borimg.png) 30 30 30 30 round;
	-webkit-border-image:url(/uploadfile/borimg.png) 30 30 30 30 round;
	-o-border-image:url(/uploadfile/borimg.png) 30 30 30 30 round;
	border-image:url(/uploadfile/borimg.png) 30 30 30 30 round;
}

和你想的一样，url()语句指向你想要用作边框的图片。

后面的四个数字定义了你想把图片裁剪成的边框切片的宽度（请注意这些数字代表像素，即便它们不带单位）。按顺序它们分别代表顶部切片、右部切片、底部切片和左部切片，如下图所示：

你可以把切片设置成你想要的任何尺寸，但很明显以保持图片中你所需部分的切分方式更合理些。很自然，由于这四个切片的尺寸是一样的，所以你可以只给border-image定义一个或两个值，例如：
border-image: url(/uploadfile/borimg.png) 30 round;

注意：你还可以使用百分比来定义切片尺寸，请注意像素值不应包含px单位，如果你包含了这些单位（比如30px），它就无效了。

在切割图片之后，就会将图片应用到容器的边框上：四个顶角保持不变，四条边线则以一个维度平铺满边框，无论它们有多长。图片的中心部分则沿两个方向平铺满整个容器剩余的背景空间。

如何控制每个边框平铺的方式呢？请使用round关键词。round指定了浏览器应保持每个边框片段完整地重复，不留不完整的碎片，调整每个片段的尺寸以确保效果。如果你试着改变Opera、Firefox和IE浏览器的大小，你会发现球的大小会有细微的变化。遗憾的是，基于WebKit的浏览器将round等同于repeat对待，另一个仅仅用来让片段在边框上循环直至填满边框的值，而不是完整的循环。这将有可能导致你在各边的结尾处留下看起来并不顺眼的碎片（如下所示）。

只要仔细规划切片的形状，避免在它们的方向上有太大的高度差，碎片看起来还是可以授受的。另一个需要注意的值是stretch，这是默认值，如果在以上例子中用stretch代替round或省略round，你将看到如下所示的效果：

还要说的是，请注意在此我只给四个边定义了一个重复行为值，如果你需要各边有不同的重复效果，可以定义两个值或者四个值，例如：round stretch或round stretch round stretch（不知道什么原因，我设置了四个属性时什么效果都看不到）。

对于这个基本语句你还有一个必须了解的细节。为了给边框图片留出空间，还需要指定一个边框宽度，这就是为什么在例子中还包含了border-width:30px。如果不这么做，你将什么效果都看不到。border-width属性还带来了另一种可能性：如果你让边框宽度大于或小于border-image属性中定义的切片的大小，切片会随之放大或缩小以适应边框宽度。因此，如果你像下面这样把边框宽度设置成原来的一半：
border-width: 15px;
边框图片的切片会以原来的一半尺寸显示，见如下效果：

Border-image 的问题

正如网页设计中的很多事物那样，使用border-image不会一帆风顺。除了基于WebKit的浏览器对round值的不支持外（最新版本已实现支持），还有几个问题需要记在心上。

首先，你得下定决心能否丢弃中间的切片。你可能想要中间的切片像内容容器的背景一样，或者只是想要边框上的边框图片。遗憾的是，根据规范，默认的行为是丢弃它，但大多数浏览器恰恰相反，除了Chrome。你本应该通过border-image-slice属性来控制这个行为，但这个属性目前没有得到任何浏览器支持，因此你唯一的选择就是明确地用background-color或重复的background-image来填充背景，并试着让它与border-image相匹配。

其次，旧版IE不支持border-image，因此你应该在这些旧版IE里测试你的内容是否还具有可读性。