圓角邊框是css3新增屬性，在圓角邊框出現之前，前端開發有的採用整塊的圓角圖片作為背景，有的採用小的圓角圖片分別放在元素的四角，非常麻煩，靈活性差，也達到降低了網站的整體效能，而圓角邊的出現則降低了開發和維護的難度。

css3實現圓角邊框

圓角邊框（boder-radius）的基本用法：

圓角邊框的最基本用法就是設定四個相同弧度的圓角

boder-top-left-radius：30px；      //左上角

boder-top-right-radius：30px；   //右上角

boder-bottom-left-radius：30px；  //右下角

boder-bottom-right-radius：30px； //左下角

如果這四個弧度的圓角相同，可以寫成：

border-radius：30px；

例子：

css部分：

.div1{

            margin:0 auto;

            background: darkcyan;

            width:200px;

            height:200px;

            border:2px solid darkslategray;

            border-radius:30px;

            text-align: center;

            line-height: 200px;

        }

html部分：

 <div class="div1">圓角邊框</div>

效果如圖：