边框轮廓的设置涉及很多浏览器兼容性的问题，特别是CSS3带来了很多新的特效，但是CSS3带来的浏览器兼容就不仅仅是我之前每次想到的IE6、7啦，也包括IE的更高版本，还有火狐啊，欧朋啊，谷歌啊，苹果啊，这类现代浏览器，所以对于css3的新特性还是慎用比较好。
-
border
定义边框：
border：1px solid red;
/设置边框为红色，宽度为1px、样式为实线/ -
outline
定义轮廓：
格式为:outline:style style width;
outline: blue inset 20px;
/设置蓝色的，宽度为20px、样式为3D凸边的轮廓/
以下是边框轮廓的样式：
solid定义实线
none默认。定义无。
dotted定义点状。这个值在浏览器中表现各异，注意使用
dashed定义虚线。
double定义双线。
groove定义 3D 凹槽。
ridge定义 3D 凸槽。
inset定义 3D 凹边。
outset定义 3D 凸边。
以上是css3以前对于边框的一些修饰。兼容性还很好。
一下是css3的一些新特效，使用时注意兼容性：
-
border-radius圆角
浏览器兼容性：IE9+、Firefox 4+(2011年3月)、Chrome、Safari 5+ 以及 Opera 支持 。
使用方法：border-radius:25px;同时为了兼容老版本的火狐浏览器，W3C提出这样的写法：-moz-border-radius: 25px;，但是依旧不支持IE8及以前。
更多效果，参考W3C进行测试 -
border-shadow阴影
浏览器兼容性：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 。
格式：box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow:20px 10px 5px 1px #000000 inset;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
h-shadow 为水平阴影的位置。
v-shadow 为垂直阴影的位置。
以上两个为必填项
blur 模糊距离。
spread 阴影的尺寸。
color 阴影的颜色。
inset 将外部阴影 (outset) 改为内部阴影。
更多效果，参考W3C -
border-image图像轮廓绘制
浏览器兼容性：Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持。同时，Safari 5 支持替代的-webkit-border-image属性。
使用方法：
border: 10px solid transparent;
border-image: url(hhh.png) 75 75 75 stretch;/不要挂单位/
顺序：border-image：source slice width outset repeat；
解释：
border-image 属性是一个简写属性，用于设置以下属性：
border-image-source 用在边框的图片的路径。
border-image-slice图片边框向内偏移。
border-image-width图片边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
更多效果，参考W3C进行测试
这篇，没图额，因为不太懂
