邊框樣式
<div style="width: 300px; height: 50px; border-style: dotted;">點線式邊框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: dashed;">破折線式邊框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: solid;">直線式邊框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: double;">雙線式邊框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: groove;">槽線式邊框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: ridge;">脊線式邊框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: inset;">內嵌效果的邊框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: outset;">突起效果的邊框</div>
邊框配色
邊框陰影
<div style="width: 300px; height: 100px; background-color: #ff9900; -webkit-box-shadow:10px 10px 5px #888888; /*老的For Chrome5+, Safari5+*/ -moz-box-shadow: 10px 10px 5px #888888; /* 老的 firefox */ box-shadow: 10px 10px 5px #888888;"> </div>
邊框陰影語法：
原點左側為x軸負方向，值為負，右側為正；原點下方為y軸正方向，值為正，上方為負。
內陰影 
外陰影
box-shadow: h-shadow v-shadow blur spread color inset;
-webkit-box-shadow是 For Chrome5+, Safari5+；
-moz-box-shadow 是 For Firefox3.6+ ；
box-shadow是最新版的瀏覽器均適用。
h-shadow：水平陰影的位置。允許負值。v-shadow：垂直陰影的位置。允許負值。blur：模糊距離（只能為正值）。
spread：陰影的尺寸。color：陰影的顏色。 inset：將外部陰影 (outset) 改為內部陰影。
邊框圓角
<html>
<head>
<style> div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:350px; border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>利用border-radius 屬性向元素添加圓角。</div>
</body>
</html>
border-radius:3px 4px 5px 6px
代表設置對象左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。
因為CSS3相當於屬於CSS2補充，IE9以下瀏覽器不兼容，也就是（IE6-IE8）低版本瀏覽器下即使設置了CSS3圓角樣式也不會顯示。不過你設置了不用顧問低版本瀏覽器。比如直到今天（2014年5月6日前）淘寶聚划算也使用圓角樣式，在IE9以上瀏覽器能看到圓角樣式，低版本依然是直角效果。
用圖片做邊框
<style> div { border:15px solid transparent; width:300px; padding:10px 20px;
} #round { -moz-border-image:url(http://blog.xinlvtian.com/style/images/weixin.png) 15 15 15 15 repeat; /* Old Firefox */ -webkit-border-image:url(http://blog.xinlvtian.com/style/images/weixin.png) 15 15 15 15 repeat; /* Safari and Chrome */ -o-border-image:url(http://blog.xinlvtian.com/style/images/weixin.png) 15 15 15 15 repeat; /* Opera */ border-image:url(http://blog.xinlvtian.com/style/images/weixin.png) 15 15 15 15 repeat;
}
</style>
<div id="round"><span style="font-size: 16px;">在這里，圖片鋪滿整個邊框。</span></div>
這是做邊框用的圖片 
兼容性：
<number>：number是一個數值，用來設置邊框的寬度，其單位是px，其實就像border-width一樣取值，可以使用1~4個值，其具體表示四個方位的值，大家可以參考border-width的設置方式；
其中number是沒有單位的，專指像素px，因為其默認的單位就是像素px，所以在使用number時不需要加上單位，如果加上了單位反而是錯誤的寫法。
<percntage>：percntage也是用來設置邊框的寬度，跟number不同之處是，其使用的是百分比值來設置邊框寬度；
stretch,repeat,round:用來設置邊框背景圖片的鋪放方式，類似於background-position，其中stretch是拉伸（默認值），repeat是重復，round是平鋪。
參考： border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
border-image-slice（用來分解引入進來的背景圖片）
percentage百分比值來表示，百分比的值是相對於邊框背景圖片而言的，例如邊框圖片的大小是300px*240px,我們取百分比為25% 30% 15% 20%，那么它們實際對應的效果就
是剪切了圖片的60px 90px 36px 60px的四邊大小。（如下圖）
如上圖所示:border-image-slice中的number或者percentage都可取1~4個值，也是遵從top,right,bottom,left的規則。
border-image-slice:fill；從字面上說是就是填充，如果使用這個關鍵字時，圖片邊界的中間部分將保留下來。默認情況下是為空的。