1 border-top-left-radius:25px; 2 border-top-right-radius:25px; 3 border-bottom-right-radius:25px; 4 border-bottom-left-radius:25px;

　　下面的例子，是使用 em 单位给 DIV 创建一个圆角边框：

边框圆角border-radius 属性允许你为元素添加圆角边框！

　　在 Chrome 中显示如下：

　　上面例子中定义的圆角，等同于：

1 border-top-left-radius:2em 0.5em; 2 border-top-right-radius:1em 3em; 3 border-bottom-right-radius:4em 0.5em; 4 border-bottom-left-radius:1em 3em;

　　注意：IE9+ 以及所有浏览器都支持 border-radius 属性。

　　②、box-shadow

　　box-shadow 属性可以设置一个或多个下拉阴影的框。

　　语法：

box-shadow: h-shadow v-shadow blur spread color inset;

　　注意：box-shadow 属性向框添加一个或多个阴影。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

　　下面是 box-shadow 属性的值：

值 说明

h-shadow 必需，水平阴影的位置，允许负值。

v-shadow 必需，垂直阴影的位置，允许负值。

blur 可选，模糊距离。

spread 可选，阴影的尺寸。

color 可选，阴影的颜色。

inset 可选，将外部阴影 (开始时) 改为内部阴影。

　　注意：IE9+ 以及所有浏览器都支持 box-shadow 属性。

　　③、border-image

　　border-image 属性是一个简写属性，用于设置所有边框图片。

　　语法：

border-image: source slice width outset repeat;

　　可以设置的属性：

　　　　border-image-source 用于指定边框使用图片的路径。

　　　　border-image-slice 图片边框向内偏移。

　　　　border-image-width 图片边框的宽度。

　　　　border-image-outset 边框图像区域超出边框的量。

　　　　border-image-repeat 图像边框是否应平铺（repeat）、铺满（round）或拉伸（stretch）。

　　省略的值，会设置为他的默认值。

　　为了便于理解，以及对每个单独属性的解析，可以给 W3C 指定的 border 图简单的做一些标记，如下：

　　然后，将 DIV 的透明边框改为 30px，再使用上面的图给 DIV 创建图片边框，在 Chrome 中显示如下：

　　虽然显示效果不佳，但不影响我们观察图片边框、平铺以及拉伸到底都做了些什么：

　　边框图片的四个角即标有数字 1，3，7，9 的格子，始终保持不变。

　　边框图片的中间即标有数字 5 的格子，不管是被平铺还是还是被拉伸，他都会被双向拉伸。

　　当边框图片被平铺时，标有数字 2，4，6，8 的各自，其中 2 和 8 被水平重复，4 和 6 则垂直重复。

　　当边框图片被拉伸时，标有数字 2，4，6，8 的格子，其中 2 和 8 被水平拉伸，4 和 6 则垂直拉伸。

　　注意：IE11 以及所有浏览器都支持 border-image 属性，IE9 和 IE10 不支持该属性。

　　一、border-image-source

　　border-image-source 属性指定要使用的图片，而不是由 border-style 属性设置的边框样式。

　　该属性默认值为 none 没有图像被使用。如果值是 none 或者无法显示图片，边框样式会被使用。

　　下面的代码，使用图片作为 DIV 的边框：