CSS3 Border（邊框）主要有以下屬性：
- border-radius
- box-shadow
- border-image
**注意：**Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。Firefox、Chrome 以及 Safari 支持所有新的邊框屬性。對于 border-image，Safari 5 以及更老的版本需要前綴 -webkit-。Opera 支持 border-radius 和 box-shadow 屬性，但是對于 border-image 需要前綴 -o-
## border-radius （圓角邊框）
在 CSS3 中，border-radius 屬性用于創建圓角
~~~
.border_radius {
border: 2px solid;
font-size: 14px;
color: #ffffff;
font-weight: bold;
padding: 10px;
background: #6AAFCF;
border-radius: 25px;
-moz-border-radius: 25px; /* For Firefox Browser */
-webkit-border-radius: 25px; /* For Safari and Google Chrome Browser */
-o-border-radius: 25px /* For Opera Browser */
}
~~~
## box-shadow （邊框陰影）
在 CSS3 中，box-shadow 用于向方框添加陰影：
~~~
.box_shadow {
font-size: 14px;
color: #ffffff;
font-weight: bold;
padding: 10px;
background: #6AAFCF;
-moz-box-shadow: 15px 15px 5px #888245; /* For Firefox/Mozilla */
-webkit-box-shadow: 15px 15px 5px #888245; /* For Google Chrome and Safari */
-o-box-shadow: 15px 15px 5px #888245; /* For Opera */
box-shadow: 15px 15px 5px #888245;
}
~~~
## border-image （邊框圖片）
通過 CSS3 的 border-image 屬性，您可以使用圖片來創建邊框：
~~~
.border_image {
border-width: 15px;
-moz-border-image: url(/images/border.png) 30 30 round; /* Firefox */
-webkit-border-image: url(/images/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image: url(/images/border.png) 30 30 round; /* Opera */
border-image: url(/images/border.png) 30 30 round;
}
~~~
## 源碼
本文中所用例子源碼參見[https://github.com/waylau/css3-tutorial](https://github.com/waylau/css3-tutorial) 中 `samples` 目錄下的 border.html
