有了邊框之後發現角角都尖尖的好醜
(尤其在IE的顯示之下圓角都變尖角←所以不管它)

輕鬆加上圓角的方式 ↓
只要使用border-radius即可
超簡單的設定，畫面品質瞬間就大加分

以下為三種為div加上圓角的方式

<style>
.corner_basic {
　position:absolute; background-color:#99CCFF;　/*位置、底色*/
　width:250px; height:120px;　　　　　　　　　　 /*寬度、高度*/
　top:30px; left:50px;　　　　　　　　　　　　　　/*對上距離、對左距離*/
　border-radius:10px;　　　　　　　　　　　　　 /*邊框圓角：角度大小*/
}
</style>

<div class="corner_basic">基本帶圓角的div底色</div>


不需要邊框，底色也能做出圓角的邊緣
加上一行border-radius即可

<style>
.corner_border {
　position:absolute; background-color:#FF9999;
　width:250px; height:120px;
　top:200px; left:50px;
　border:dashed 2px #333333;　　　　　　　　　/*邊框設定：樣式、寬度、顏色*/
　border-radius:10px;　　　　　　　　　　　　　 /*邊框圓角：角度大小*/
}
</style>

<div class="corner_border">加上圓角外框後的div</div>


基本div加上邊框之後的樣子
先設定一行border，再加上一行border-radius即可

<style>
.corner_mix {
　position:absolute; background-color:#FFFF66;
　width:250px; height:120px;
　top:370px; left:50px;
　border:double 4px #333333;　　　　　　　　　/*邊框設定*/
　border-top-left-radius:10px;　　　　　　　　　  /*邊框-左上-圓角*/
　border-top-right-radius:30px;　　　　　　　　   /*邊框-右上-圓角*/
　border-bottom-left-radius:50px;　　　　　　　   /*邊框-左下-圓角*/
　border-bottom-right-radius:70px;　　　　　　    /*邊框-右下-圓角*/
}
</style>

<div class="corner_mix">可各自設定不同角度</div>


想要在不同的角有不同角度的圓角
也可以各別用加上位置的方式來設定
雖說中文習慣說「左上」，但這裡的語法要「先寫上下、再寫左右」。
 

範例連結：只要加上圓角，fu就有了！